Personalize the Bootstrap 4 CDN option

Is there a mistake in my code or am I just missing something when trying to override Bootstrap 4 CSS/SCSS? I tested it on W3Schools and it worked, but it doesn't seem to be working elsewhere. Additionally, I prefer to serve different CSS files to users based on whether an option is enabled rather than modifying the custom.scss file directly.

<html>
  <head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <style>
    .active {
    color: red;
    }
    </style>


  </head>

  <body>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <a class="navbar-brand" href="#">HTUDelta</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                  <li class="nav-item">
                      <a class="nav-link active" href="#">Home
                          <span class="sr-only">(current)</span>
                      </a>
                  </li>
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Users only
                          <span class="sr-only">Users only</span>
                      </a>
                  </li>
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Featchers
                          <span class="sr-only">Upcoming</span>
                      </a>
                  </li>
              </ul>
              <ul class="navbar-nav ml-auto">
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                          aria-expanded="false">Dropdown </a>
                      <div class="dropdown-menu" aria-labelledby="colourBlindDropDown">
                          <a class="dropdown-item" href="?colour=Trichromacy&set=true">Trichromacy</a>
                          <a class="dropdown-item" href="?colour=Deuteranomaly&set=true">Deuteranomaly</a>
                          <a class="dropdown-item" href="?colour=Protanomaly&set=true">Protanomaly</a>
                          <a class="dropdown-item" href="?colour=Tritanomaly&set=true">Tritanomaly</a>
                          <a class="dropdown-item" href="?colour=Monochromaticy&set=true">Monochromaticy</a>
                          <div class="dropdown-divider"></div>
                      </div>
                  </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                  <input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Username">
                  <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="password">
                  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Login</button>
              </form>
          </div>
      </nav>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Answer №1

The issue arises from the lack of specificity in the selector. Please review the following code snippet.

<html>
  <head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <style>
    .navbar-dark .navbar-nav .nav-link.active.active {
      color: red;
    }
    </style>


  </head>

  <body>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <a class="navbar-brand" href="#">HTUDelta</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                  <li class="nav-item">
                      <a class="nav-link active" href="#">Home
                          <span class="sr-only">(current)</span>
                      </a>
                  </li>
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Users only
                          <span class="sr-only">Users only</span>
                      </a>
                  </li>
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Features
                          <span class="sr-only">Upcoming</span>
                      </a>
                  </li>
              </ul>
              <ul class="navbar-nav ml-auto">
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                          aria-expanded="false">Dropdown </a>
                      <div class="dropdown-menu" aria-labelledby="colourBlindDropDown">
                          <a class="dropdown-item" href="?colour=Trichromacy&set=true">Trichromacy</a>
                          <a class="dropdown-item" href="?colour=Deuteranomaly&set=true">Deuteranomaly</a>
                          <a class="dropdown-item" href="?colour=Protanomaly&set=true">Protanomaly</a>
                          <a class="dropdown-item" href="?colour=Tritanomaly&set=true">Tritanomaly</a>
                          <a class="dropdown-item" href="?colour=Monochromaticy&set=true">Monochromaticy</a>
                          <div class="dropdown-divider"></div>
                      </div>
                  </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                  <input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Username">
                  <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="password">
                  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Login</button>
              </form>
          </div>
      </nav>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  </body>
</html>

Additionally, take note that the class active is applied to different elements, which may not produce the desired outcome. It is recommended to use the same element type and adjust the selector accordingly.

<li class="nav-item">
  <a class="nav-link active" href="#">Home
     <span class="sr-only">(current)</span>
   </a>
</li>
<li class="nav-item active">
   <a class="nav-link" href="#">Users only
     <span class="sr-only">Users only</span>
   </a>
</li>

One approach is to override the style using !important, however, it is not recommended as it may not work due to the different elements being targeted.

.active {
   color: red !important;
}

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 is the best way to center the image on a page?

How can I center an image on the screen with a caption? <div id="team-area"> <div class="container"> <div class="row"> <div class="col-12"> <h3 class="main-title">Our Team</h3> < ...

Is there a Polar transformation available in CSS3?

Converting a line into a ring is a straightforward process in graphic design software like GIMP: https://i.sstatic.net/7lQZe.png (source: adamhaskell.net) I'm exploring the possibility of achieving the same effect using CSS. Here's what I&ap ...

Connecting CSS and JS files in JSP was a bit of a challenge

Just starting out with jsp and using Glassfish server via netbeans. Struggling to link my jsp file with css and javascripts. Below is the structure of my files: Web Pages --Web-Inf --assets --css --style.css --js --jquery.js ...

Sending a CSS class to an Angular library

In my development process, I am currently working on creating a library using Angular CDK specifically for custom modals. One feature I want to implement is the ability for applications using the library to pass a CSS class name along with other modal conf ...

Iterating through records with a set of three columns in every row

I need to divide each row into 3 columns image : https://i.sstatic.net/4phtb.jpg <div id="list-product"> <div class="row"> @foreach($products as $product) <div class="col-lg-4 ...

Ways to interact with a button that toggles between states

I am working with a button that has both an enabled and disabled state. Enabled State: <button type="button" class="btt-download-csv site-toolbar-menu-button icon-download no-icon-margins ng-isolate-scope" title="Download CSV" rc-download-csv="" curren ...

What kinds of font file formats are you utilizing?

In numerous projects, I have observed a common practice of using multiple font extensions such as .TTF, .WOFF, and .WOFF2. However, this can result in having multiple files for a single source. Imagine the clutter if one has several sources with different ...

NodeJS for CSS Parsing and Selecting

Can anyone recommend a NodeJS library similar to https://github.com/alexdunae/css_parser? I have tried using https://github.com/visionmedia/css, but it doesn't fulfill all my requirements. For example, when I parse the following CSS: .behavior1 {co ...

Steps to extract a hash from a document's URL

The following code is used: jQuery(document).ready(function() { console.log($(this)); }); After running this code, the object displayed in the console is: [Document mypage.html#weather] How can I retrieve the last ID from this object? In this ...

Updating the UpdatePanel causes duplication of CssClass

In my ASP.NET Webforms project, I have created a user control that inherits from the LinkButton. This user control has a property to adjust the size by adding predefined CSS classes to the control. Protected Overrides Sub CreateChildControls() Dim Siz ...

Navigating through a list of items using keyboard shortcuts in HTML

Similar Question: KeyBoard Navigation for menu using jquery I have developed a menu using unordered list items and display it when the user presses the Enter key in the textbox. While the user can navigate through the menu using the mouse to select it ...

Incorporate a style sheet for a colorful navigation bar

I'm looking to add a colored bar below my navigation menu but I'm unsure of the correct method to do so. What I need: EDIT: I also need guidance on how to position the navigation menu at 50% of the height of the logo. Currently, I have used a & ...

Creating a script to open multiple URLs in HTML and JavaScript

Currently, I am working on creating a multiple URL opener using HTML and JavaScript. However, I have encountered an issue where HTTP links are opening fine but HTTPS links are not. Can someone provide assistance with this problem? Below is the code snippet ...

Enhancing the appearance of React Native WebView with CSS styling

Currently, I find myself facing a challenge... We are using a WebView in a section of our app because we receive an HTML string from an API endpoint. The HTML styling is not optimized for mobile use, so we are attempting to make some stylistic changes to i ...

Having trouble getting the height to work properly on your Blogger Blogspot template?

Issue with embed height=100% not working <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> & ...

Ensuring a logo remains centered and stable even when the browser is resized

How can I ensure that this logo remains fixed at the center top of the page, without moving as the browser size changes? I want the logo to maintain its position and not recenter itself when the browser is resized. Below is my current CSS CSS #logo { p ...

Why aren't CSS media queries functioning in the existing stylesheet?

I have a good grasp on responsive design and CSS techniques. However, I am encountering an issue where the media query for mobile dimensions is not working as expected. When monitoring the applied styles in Chrome, only the min-device-width styles are be ...

I am facing an issue with properly linking my jQuery

After searching through numerous posts on this website, I have yet to find a solution to my problem. My issue involves trying to implement a simple jQuery function that is not functioning as expected. It appears that the jQuery link may not be properly set ...

Easily transition the header's height when selecting a menu item

I am trying to achieve a collapse effect or something similar However, when I click on a menu item, the height changes too quickly without any animation What could be wrong in my code? I am looking to reference an effect similar to the one seen in the h ...

CSS transitions following with visual/codepen

Does anyone know how to animate two images, bringing them to a central point before rotating them simultaneously? I'm struggling with transforming the svgs prior to starting the animation. Take a look at this example. My goal is to apply transform: r ...