customize bootstrap navigation and dropdown

mikha used Ask the Experts™
I'm utilizing bootstrap 4 to create navigation and dropdown menu for my website.

how can I customize, or override default  color, size of dropdown and navigation menu?
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Hi c k,

This is a two step process. The first one is to add another CSS file(for example, I use site.css 'cause Visual Studio default Project settings that file).

And include in all the pages/templates after bootstrap.

<link href="Styles/bootstrap.css" rel="stylesheet"> 
<link href="Styles/site. css" rel="stylesheet">

Open in new window

And in the site.css, change the definition as you see fit. Also you can use !important keyword to hint the overrides as well.

For exammple,

.dropdown-item { background-color: red; color: white; }

Open in new window

Owner (Aidellio)
Most Valuable Expert 2015
depending on how much you'd like to customize, I recommend downloading the "source" and tweaking it to suit your environment.

It's ok to override the odd bootstrap component e.g. button color, but for more widespread configuration, you're better off customising through the source and compiling it (which is really easy to do, just ask if you have an issue).

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial