How To Change Bootstrap 4 Drop-down Colors?

March 26, 2023 Post a Comment

I am trying to change both the background, and font color of the bootstrap 4 dropdown navigation. I tried to use .nav.nav-tabs > li.dropdown.active.open > a, .nav.nav-tabs

Solution 1:

I know this is already answered, but since I'm bookmarking it, I want to give the solution that worked for me when theming Bootsrap using Sass and NPM.

Note that I include functions and variables above my custom ones because I need to access them otherwise the compilation will fail. Read more about it on this issue.

Suppose you have your _custom.scss like this:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Add your custom variables here

@import "~bootstrap/scss/bootstrap";

Then you can go to Bootstrap's main variables file and copy over the ones you want to overwrite.

For example, if I want my dropdown background to be dark with white links I'd do it like:

$dropdown-bg:                       $dark;
$dropdown-link-color:               $light;

And my _custom.scss file after the changes would like like this:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Add your custom variables here
$dropdown-bg:                       $dark;
$dropdown-link-color:               $light;

@import "~bootstrap/scss/bootstrap";

And this is an image of what it looks like after compiling Sass:

This way I don't overwrite CSS rules avoiding unnecessary clutter.

Solution 2:

.dropdown {list-style: none; background: green; padding: 10px; display: inline-block;}
.dropdown .nav-link {color:#fff; text-decoration: none;}
.dropdown .dropdown-menu a{color: #000; text-decoration: none;}
.dropdown .btn {background: green; color:#fff;}
.dropdown .btn:hover {background: cyan; color:#000;}
.dropdown .btn:active {background: cyan; color:#000;}
.dropdown .btn:focus {background: cyan; color:#000;}
.dropdown-menu .dropdown-item {display: inline-block; width: 100%; padding: 10px 5px;}
.container .dropdown .dropdown-menu a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
  Dropdown link
</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
</div>

</body>
</html>

Here is a some code, hope it will helps you.

Edited

It is working fine now

Solution 3:

In Bootstrap v4.3.1 I simply copy the CSS path from the browser developer tools, and add it to my Website.css, and add to it some styles to much the look and feel of the website I am building:

/*drop-down override*/
div.btn-group.show div.dropdown-menu.show {
  background-color: #4b4b4b;
}

div.btn-group.show div.dropdown-menu.show button.dropdown-item {
  color: #e1e1e1;
}

div.btn-group.show div.dropdown-menu.show div.dropdown-divider {
  border-top: 1px solid rgba(50, 50, 50, 0.9);
}

div.btn-group.show div.dropdown-menu.show button.dropdown-item:hover,
div.btn-group.show div.dropdown-menu.show button.dropdown-item:focus {
  background-color: #1e1e1e;
  color: #f0f0f0;
}

The result should look like this:

Html5 Academy

How To Change Bootstrap 4 Drop-down Colors?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How To Change Bootstrap 4 Drop-down Colors?"