customize bootstrap navigation and dropdown

mikha
mikha used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

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

Commented:
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.
i.e.

<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


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

https://getbootstrap.com/docs/4.1/getting-started/download/#source-files

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