CODEWITHSUNDEEP
csstwitter-bootstrapasp.net-mvc-5
Kevin
Kevin

Reputation: 333

Bootstrap Dropdown background color

I am trying to create a dropdown list in the navbar that matches the style of the rest of the navbar. I have not overwritten any of the bootstrap classes to my knowledge and I am wondering if there are any classes that have the same styling for a dropdown list.

I have been looking through other articles and most seem to just use a random class and it works correctly. I tried to make a custom CSS class for it but I was unable to successfully match the header.

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Management
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
       <a class="dropdown-item" href="@Url.Action("Index", "Management")">Statistics</a>
       <br />
       <a class="dropdown-item" href="@Url.Action("Index", "Production")">Production Lines</a>
       <br />
       <a class="dropdown-item" href="@Url.Action("Index", "Announcement")">Announcements</a>
       <br />
       <a class="dropdown-item" href="@Url.Action("Index", "TestStation")">Test Stations</a>
    </div>
</li>

When creating a dropdown list, is there a special class to use that matches the navbar or do I have to create a custom one?

enter image description here

Upvotes: 0

Views: 3600

Answers (3)

Tim Kruger
Tim Kruger

Reputation: 897

Change the styling of the .dropdown-menu class in your style sheet in bootstrap 4.1.3.

Upvotes: 0

Majid Zohrabbeigi
Majid Zohrabbeigi

Reputation: 550

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

Upvotes: 1

Nils M.
Nils M.

Reputation: 76

Assuming your nav-bar uses the primary color you can give the dropdown the bg-primary class to give it the primary color background (https://getbootstrap.com/docs/4.0/utilities/colors/#background-color)

It's possible your going to have to assign this class to all the ul items individually

Upvotes: 0

Related Questions