How to Change Bootstrap 4 Drop-Down Colors

How to change background colour of opened bootstrap dropdown list - Bootstrap 4

.navbar .dropdown-menu {
  background-color: #BADA55;
}

/* and this styles the dropdwon trigger link, when open */
.navbar .dropdown.show a { 
  background-color: #BADA55;
}

...is enough.

Note .navbar limits it to menu and without it, it would style all .dropdowns, as long as you load your CSS after bootstrap(.min).css.

.navbar .dropdown-menu {  background-color: #BADA55;}.navbar .dropdown.show a {  background-color: #BADA55;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.1.1.slim.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>
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">  <button class="navbar-toggler navbar-toggler-right" 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>  <a class="navbar-brand" href="#">Title</a>
  <div class="collapse navbar-collapse justify-content-stretch" id="navbarSupportedContent">    <ul class="navbar-nav ml-auto">      <li class="nav-item active">        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>      </li>       <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">      Services    </a>    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">      <a class="dropdown-item" href="#">Design</a>      <a class="dropdown-item" href="#">Development</a>      <a class="dropdown-item" href="#">Consulting</a>    </div>  </li>      <li class="nav-item">        <a class="nav-link disabled" href="#">Disabled</a>      </li>    </ul>    <form class="form-inline my-2 my-lg-0">      <input class="form-control mr-sm-2" type="text" placeholder="Search">      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>    </form>  </div></nav>

How to change bootstrap 4 drop-down colors?

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

Bootstrap 4 nav-tabs dropdown menu color when open

Use :focus

.dropdown-toggle:focus{...}

.dropdown-menu {    background-color: var(--dark-gray);    border-top: 1px solid white;    border-right: 1px solid white;    border-left: 1px solid white;    border-bottom: 1px solid white;}
.dropdown-item:hover {    background-color: var(--gray);}
.dropdown-toggle.active {    background-color: blue;}
.dropdown-toggle:active, .open .dropdown-toggle,.dropdown-toggle:focus {    background-color: blue !important;    color: red !important;}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><ul class="nav nav-tabs nav-justified">    <li class="nav-item dropdown">        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Projects</a>        <div class="dropdown-menu dropdown-menu-center">            <a class="dropdown-item" href="#algorithms-data">Algorithms and Data Structures</a>            <a class="dropdown-item" href="#programming-lab">Programming Lab</a>            <a class="dropdown-item" href="#computer-systems">Computer Systems Organization</a>        </div>    </li></ul>

Bootstrap Dropdown background color

dropdown-item background color in bootstrap is white and if you want change it you can change it in your page style. you can add this code to your head tag:

.dropdown-item{
background-color: #2e89e5;
color: #fff;
}

How to change default dropdown color for bootstrap 4 selectpicker?

Finally, I modify below code and solve my problem.

.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
  background: #FFF;
  color: #000;
  border-color: #999;
}

How can you change the background color of an active bootstrap dropdown element?

To change the color :active when clicking on links in bootstrap, you need to make an override the background color with the required parameter !important. This parameter makes your style rule or css priority relative to the current one.

Add this to your stylesheet (or css):

.nav-item.dropdown .dropdown-item:active {
    background-color: green !important;
}

I used green as an example. But you can apply the color you want.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<style>
    :root {
        --bs-primary: brown;
    }

    .bg-primary {
        background-color: var(--bs-primary) !important;
    }

    .nav-item.dropdown .dropdown-item:active {
        background-color: green !important;
    }
</style>

<!-- Navbar: -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" 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>
        </ul>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Change background color of bootstrap dropdown link when clicked

Try this code in your css!

.dropdown-item:active {
background-color: red !important; //Any color you want
}

In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon

.dropdown-item:active {
background-color: red !important; //Any color you want
}

<!doctype html>
<html lang="en">
  <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
    
<style>


</style>
  </head>
  <body><div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

How to change navbar dropdown click color (Bootstrap using bootswatch theme)

So, what you want to control here is called the active state of a dropdown-item. It becomes active when you click and remains active while you keep holding the mouse button down.

In general, all links have an active state as well as a normal state along with a hover state (and visited state).

Here's the css rule set for the active state of a dropdown-item in Bootstrap 4:

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    background-color: darkviolet;
}

I used "darkviolet" as the background color there but, of course, you can customize it as needed.

Here's the full working snippet (click "run code snippet" below and expand to full page):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>    <style>    .dropdown-item.active, .dropdown-item:active {        color: #fff;        background-color: darkviolet;    }</style>   <nav class="navbar navbar-expand-lg navbar-light bg-light">    <a class="navbar-brand">NAME</a>    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">        <span class="navbar-toggler-icon"></span>    </button>    <div class="collapse navbar-collapse" id="navbarNavDropdown">        <ul class="navbar-nav">            <li class="nav-item active">                <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>            </li>            <li class="nav-item dropdown">                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                    Project showcase                </a>                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">                    <a class="dropdown-item" href="projects/discordbot.html">DOTA 2 Discord bot</a>                    <a class="dropdown-item" href="projects/connect4.html">Connect 4 using TypeScript</a>                    <a class="dropdown-item" href="projects/dailyweatherapp.html">Dailyweatherapp using Electron</a>                </div>            </li>        </ul>    </div></nav>