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

Using Selenium to stream audio directly from the web browser

For my current project, I am utilizing Selenium with Python. I have been exploring the possibility of recording or live streaming audio that is playing in the browser. My goal is to use Selenium to retrieve the audio and send it to my Python application fo ...

javascriptpythonhtmlseleniumaudio

Ways to monitor and measure clicks effectively

Within my website, I have a table element with one column and numerous rows. Each row serves as a hyperlink to an external shared drive. <tr><td ><a href="file://xxx">Staff1</a></td></tr> <tr ><td ><a h ...

javascripthtml

The grid elements are not in perfect alignment

I'm having trouble aligning the <p> element to the left and the image to the right. The image is not aligning properly with the fourth column, so I need to figure out how to fix that. .content{ display: grid; grid-template-columns: 25% 25 ...

htmlcsscss-grid

What is the best way to ensure that my website functions properly on Safari mobile?

I successfully created a website that functions well on my computer across all modern browsers. However, a user reported that it is not working on Safari mobile. Upon testing the website on Safari for Windows, it appeared to display correctly. After view ...

htmlcssmobile-safari

Output JSON data to an HTML5 table

Here is a code snippet to retrieve data: function fetchInformation(){ $.get('http://mywebsite.net/getFile.php', function(data) { var result = JSON.parse(data); } The returned JSON data is as follows: Object {0: "11", 1: ...

javascriptphpjsonhtml

Incorporate text directly into Bootstrap select input on a single line

I am attempting to include an asterisk in a select input field. I can achieve this easily by applying my own CSS, but the challenge is to accomplish this using Bootstrap 3.3.7 or an older version while displaying the asterisk on the same line as shown in t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

A variety of menu items are featured, each one uniquely colored

In the user interface I developed, users have the ability to specify the number of floors in their building. Each menu item in the system corresponds to a floor. While this setup is functional, I am looking to give each menu item a unique background color ...

javascriptjquerycssrandomcolors

What could be causing the absence of HTML attribute suggestions in my Visual Studio Code?

I'm experiencing an issue in my VS Code where the suggestion feature is not working properly. When I try to type "onClick, href, src, etc", the suggestions do not show up as they should. Interestingly, this problem doesn't occur in my older code ...

htmlvisual-studio-codejsxemmet

Navigate through the list of options by scrolling and selecting each one until the desired element is

Hey, I've got this AngularJs directive that selects an item based on the "key-pressed" event, and it's working perfectly. The issue arises when there is a scroll bar since the elements get hidden, making it difficult for me to see them. You can ...

javascripthtmlcssangularjs

Set the default value for a form control in a select dropdown using Angular

I've been struggling to figure out how to mark an option as selected in my select element, but I haven't had any luck. I've tried multiple solutions from the internet, but none of them seem to be working for me. Does anyone out there have ...

htmlangulartypescript

Tips for visually conveying the values of x and y using SVG symbols

I recently came across a blog post discussing the use of SVG symbols for icons, which inspired me to create representations of symbols using svg files. The original svgs I used had properties like x, y, height and width. However, when I tried adding these ...

htmlcsssvg

Vue transition not functioning properly when hovering over text for changes

When you hover over the circular region on the website, the text and description in the red box will change. To add a fade animation effect when the text changes, I attempted to use <transition> as per the documentation provided in this link. Unfor ...

javascripthtmlcssvue.js

The onload function on the iframe is triggering twice in Internet Explorer 11

I am encountering a strange issue with an iframe in HTML that has an onload function. When using IE11, the onload function is being triggered twice, whereas it works fine in Chrome. Here is the HTML code: <iframe src="someurl" onload="someFunction( ...

javascripthtmlangularjsiframe

Mpdf does not support inline CSS rendering

I recently implemented Mpdf into my Symfony project using Composer. The installation process involved running the following command: composer require mpdf/mpdf Next, I included the Mpdf.php file in autoload.php. Here is an example of how to use Mpdf in ...

phpcsssymfonympdf

Is it feasible to decrease the lateral margins of Bootstrap's container without the need for custom CSS? If so, what is the method?

My web page includes several screenshots to illustrate the issue I am facing. One of my challenges is the scroll bar below the table, which I find displeasing. In an attempt to resolve this, I decided to adjust the lateral margins slightly. Here's a s ...

htmlcssspring-bootbootstrap-4

Updating Template in Python Flask upon Button ClickLet's enhance our Python Flask application by

I need assistance with switching templates upon clicking a button. My Python code is as follows: @app.route("/", methods = ['POST', 'GET']) def my_forum_post(): if request.method == 'POST': if reque ...

pythonhtmlflask

The system has removed all content within the fields

I have created a code to generate a dynamic table. The problem I am facing is that when there are multiple rows in the table, clicking on the delete button deletes all field values instead of just deleting the data for the specific row where the delete b ...

javascriptjqueryhtml

What could be causing issues with angularjs ng-include not functioning properly in Chrome at times?

<html ng-app="myApp1"> <head> <title>NG-Include</title> <script src="angular.js"></script> <script src="filter.js"></script> </head> <body> <div ng-controller="myController"> ...

htmlangularjsgoogle-chrome

Error encountered while scrolling with a fixed position

I am currently in the process of developing a carousel slider that resembles what we see on Android devices. The main challenge I am facing at this early stage is applying the CSS property position: fixed; only horizontally, as vertical scrolling will be n ...

javascriptjqueryhtmlcss

Summernote - When validating text, it is shown as raw HTML

I have integrated Codeigniter with Summernote on the frontend. In a form, if certain fields are left empty, the same page reloads for validation checking. The JavaScript and CodeIgniter code I am using is as follows: $(window).load(function(){ &l ...

javascriptphpjqueryhtmlcodeigniter-2