How to change bootstrap 4 drop-down colors?

bootstrap 4 dropdown-item:hover color
bootstrap 4 dropdown background-color
bootstrap 4 dropdown select option
bootstrap 4 dropdown not working
change navbar color bootstrap 4
nested dropdown bootstrap 4
bootstrap dropdown select
bootstrap 4 navbar right

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 > li.dropdown.active.open > ul.dropdown-menu a:hover,
.nav.nav-tabs > li.dropdown.open > a, 
.nav.nav-tabs > li.dropdown.open > ul.dropdown-menu a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
}

But this wasn't working too well for me. Here is my HTML:

      <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>

.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>

How to change bootstrap 4 drop-down colors?, .navbar .dropdown-menu { background-color: #BADA55; } /* and this styles the dropdwon trigger link, when open */ .navbar .dropdown.show a  Highlight a specific dropdown item with the .active class (adds a blue background color). To disable an item in the dropdown menu, use the .disabled class (gets a light-grey text color and a "no-parking-sign" icon on hover):

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.

How to change background colour of opened bootstrap dropdown , A dropdown menu is a toggleable menu that allows the user to choose one a specific dropdown item with the .active class (adds a blue background color). of downwards, change the <div> element with class="dropdown" to "dropup" :  I am new to bootstrap (which may be my problem) and I can't seem to figure out how to change the color of these Navigation Pills. HERE is a link for you to see the pills. Right now they are blue. It would be great to know how I can change the both the font and the background colors of them.

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:

Bootstrap 4 Dropdowns, Hi, there. I need your help.I have a navbar from MDB and there is a dropdown menu. I chose a dark theme, and when I click on this menu, it shows ok, but when I  1. Link to CDN – Find and Replace Colors. If you are linking to a pre-compiled version of Bootstrap I recommend looking at the raw source and using search and replace in your code text editor to replace all of the color values.

How to change text color during hovering dropdown menu items , Wrap the dropdown's toggle (your button or link) and the dropdown menu within Any single .btn can be turned into a dropdown toggle with some markup changes. only with CSS and may need some additional styles for exact alignment. The way I did it was. Overview pane, expand Dropdown and select Menu; expand STYLES pane; the first rule is .navbar-nav .open .dropdown-menu; click the triple stacked dots on the right and select Copy To styles.css

Dropdowns, Dropdowns are toggleable, contextual overlays for displaying lists of links and Wrap the dropdown's toggle (your button or link) and the dropdown menu Any single .btn can be turned into a dropdown toggle with some markup changes. Note that you'll likely need additional sizing styles to constrain the menu width. Use this class if you are using the latest version of Bootstrap. .dropdown-toggle:active, .open .dropdown-toggle { background:#FFF !important; color:#000 !important; } It solve my problem, maybe it will help you.

Dropdowns · Bootstrap, How to change the Bootstrap 4 Navbar color example. Change the navbar color, link colors, toggler icon color, dropdown menu and more. Codeply example. Browse other questions tagged css twitter-bootstrap drop-down-menu background-color or ask your own question. The Overflow Blog Podcast 232: Can We Decentralize Contact Tracing?

Comments
  • Hey man, I'm actually using bootstrap 4, I should of clarified that. This is great, except it does not work for version 4
  • Ok let me check with bootstrap 4 hold on
  • @Temple Please check it is working fine now with bootstrap 4, you should properly override the css else it will not work. and have you used tether.js ?
  • @Temple Please accept answer if it is helpful to you. it will helpful me too. :)
  • Great answer. I additionally edited $dropdown-link-active-bg and $dropdown-link-hover-bg.
  • I'm using exactly Bootstrap version 4.3.1 and this isn't working for me for nav item dropdowns. But thanks for sharing :-)
  • You may need to remove div. or replace div. with a. or ul. depending how you built the menu.
  • Because of the changes in the new Bootstrap version 4, I just wanted to draw attention to that all what you need to do is choosing the active selector, with fully qualified order like in the answer, it not a problem of div or what element you use, it is just knowing the qualified selector.