Modify the color of the active class in Bootstrap

I am trying to modify the color of the active class in my HTML code as I create a nav sidebar. Here is the snippet from my code:

<div class="col-sm-2">
                <ul class="nav nav-pills nav-stacked nav-static"> <!--stacked for vertical layout -->
                    <li class="active"><a>Create Case</a></li>
                    <li><a href="wf-listofcase.php">List of cases</a></li>
                    <li><a href="linksofapps.html">Links of Apps</a></li>
                </ul>
    </div>

Can someone please advise on how to change the color of the active class? Thank you in advance!

htmlcsstwitter-bootstrapbackground-color

Answer №1

Here is a simple way to change the color to red:

.active a{
    color: red !important;
}

If you prefer not to use !important, you can try this alternative:

.nav-pills > li.active > a{
    color: red;
}

See it in action here

Answer №2

This code snippet will set the color of all anchor tags to red.

a {
   color: red !important;
  }

If you only want to apply the red color within a specific wrapper called "nav-static", use this code block

.nav-static .active a{
   color: red !important;
}

Answer №3

If the solutions above aren't effective, consider trying:

.active a{
    background-color : red !important;
}

Answer №4

Instructions for adding a highlighted class to each a tag element:

<a onclick="addHighlightedClass(event)"

Next, include this script in your webpage:

<script>
          function addHighlightedClass(event) {
            var target = event.currentTarget;
            if (window.previewHighlited)
              window.previewHighlited.classList.remove("active");
        
            target.classList.add("active");
            window.previewHighlited = target;
          }
  </script>

Check out the demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the guidelines for incorporating tag names in CSS selectors?

I created a button that when clicked, displays a table containing actors. I have named them as follows: <button class="actors">Show actors</button> <table class="actors">...</div> Next, I want to style and access them in my CSS (a ...

htmlcsscss-selectors

Utilize MySQL to populate highcharts with data

Learning the ropes of web programming, I have a personal project to monitor expenses. Simply put, my database stores data on total expenditures for this month and last month. I am able to display it manually (via echo), but I'm struggling to pass the ...

phphtmlmysqlhighcharts

Is there a way for me to view the specifics by hovering over a particular box?

Whenever I hover over a specific box, detailed information appears, and when I move the mouse away, the details disappear. HTML <nav> <div> <div class="nav-container"> <a href="./about.html" ...

javascriptcss

Unable to display animation without first launching it on Rive web

I attempted to incorporate a Rive animation into my Angular web application <canvas riv="checkmark_icon" width="500" height="500"> <riv-animation name="idle" [play]="animate" (load)=&qu ...

htmlangulartypescriptrive

The wonders of jQuery popup windows

A code was discovered that displays a popup, but it currently relies on transparency (opacity: 0). I would like to modify it to use display: none instead, as the transparent window in the center of my website is causing issues. Here is the JavaScript code ...

javascriptphpjquerycss

Issues arise when trying to use jQuery within an AJAX-loaded div on the same page

I have been struggling with this issue for days and have tried looking up solutions online, but haven't had any luck. I attempted changing a '.live' to '.click' in the code, but that didn't work either. In the jquery.ajaxy.js ...

jqueryajaxhtmlload

The Bootstrap button is experiencing difficulties with resizing

When utilizing the bootstrap CDN in conjunction with another bootstrap CSS example file located in the static directory, I encountered an issue while attempting to create a file input and submit button for a form. Despite my efforts, I was unable to adjust ...

htmlcssformsbootstrap-4

Avoid displaying the homepage link in the menu on Grav

I'm working on my very first Grav website. Currently, I am in the process of creating a navigation menu and would like it to display links to all visible pages except for the homepage. The issue I'm facing is that the homepage appears as the fir ...

htmlnavigationtwiggrav

Fancybox 2 - CSS styles vanish when using Ajax request

I have a fancybox2 with static dummy content that has styling applied. It works fine, but now I need to load dynamic content via ajax. However, when I make the ajax call, the required content loads but loses all css styling, most likely due to changes in t ...

jqueryhtmlcssajaxfancybox-2

Switch the checked status of an input dynamically using jQuery function

It seems like I might be overlooking something quite obvious, but I can't figure out why this jquery function is behaving inconsistently. HTML: <label id="income_this_tax_year"> <div class="left"> <p>Have you had Self-Employm ...

javascriptjqueryhtml

Efficiently Minimize Bootstrap Components Upon Clicking the Link

I've successfully created a navigation menu that expands and collapses without using a dropdown feature. However, I'm encountering an issue where I can't seem to toggle the div when clicking on a menu link. I attempted to use JavaScript to c ...

javascripthtmlcsstwitter-bootstrapnavigation

Creating a ripple effect on a circle with CSS and HTML when it is clicked

Can anyone assist me in creating a wave effect around the circle when it is clicked? To better visualize what I am trying to achieve, you can view this GIF image. Appreciate your help in advance! ...

javascripthtmlcss

What is the method for obtaining the total number of steps taken in a day (pedometer) exclusively for the current day on the

Is there a way to retrieve the total steps count for the current day only? The tizen.humanactivitymonitor.setAccumulativePedometerListener function allows me to access the accumulativeTotalStepCount, which represents the cumulative walking and running ste ...

javascripthtmltizen-wearable-sdk

Using Telegram markdown: Can you combine both bold *and* italic? (September 2018)

After referencing the Markdown Syntax guide on Telegram’s Wiki page, it appears to be quite straightforward to format text as bold and italic. The guide explains that: *this is in italic* and _so is this_ **this is in bold** and __so is this__ ***this ...

htmlmarkdowntelegrammarkuptext-formatting

Adding text to a horizontal scrolling element causes the parent div to be pushed downwards

Can anyone help me understand why inserting text into one of the divs in a horizontally scrolling div causes the parent div to move downward? Looking for suggestions! @import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700&apo ...

htmlcss

Unable to view a basic bottle webpage on Raspberry Pi from a PC

After referencing the instructions found at , I successfully tested them on a Raspberry Pi using the following code snippet: from bottle import route, run @route('/hello') def hello(): return "Hello World!" run(host='0.0.0.0', port ...

pythonraspberry-pihtmlraspbianbottle

What is the best way to organize the Fields into 4 identical columns within a grid layout?

I need assistance with organizing my UI elements into 4 equal columns, where both the label and input field appear on the same line within a grid or form layout. Can you please advise on the appropriate class to apply to the div tag that contains each pa ...

twitter-bootstraptwitter-bootstrap-3bootstrap-4

Overlapping borders in Bootstrap 4 design

Working on my project with Bootstrap 4 and encountered a coding issue. Here is the code snippet: .form-info-tab { border: 1px solid #ccc; border-collapse: separate; border-spacing: 0px; padding:5px; text-align:center; } <link ...

htmlcssbootstrap-4

Issue with JavaScript not executing upon clicking the submit button on a form within the Wordpress admin page

In the admin pages of my Wordpress installation, I have created an HTML form. My goal is to validate the data inputted when the submit button is pressed using a Javascript function. If the data is not correctly inserted, I want alerts to be displayed. Desp ...

javascriptphphtmlwordpress

Guide to counting the number of image tags within a parent div and selectively removing them starting from a specific position

My dynamic image tag <img> is generated inside a div from the database using fetching. Here is how my HTML looks: <div class='forimgbox'> <p class='palheading'>Pals</p> <img src='userpic/2232323.p ...

javascriptjqueryhtmlcss