Overriding Bootstrap’s CSS

When you want something a bit different. Use Inspect Element.

Image for post
Image for post
Image by Nathan Dumlao on Unsplash

What if you want to use bootstrap, but make a slight adjustment to what bootstrap is doing?

Assumptions

Problem to be solved

Image for post
Image for post
The list item text is black or dark gray. I want white.
Image for post
Image for post
The HTML with bootstrap classes.

Solution

Image for post
Image for post
We only need to inspect one.
Image for post
Image for post
So far so good. We are in the drop down and on a <li> tag — list item.
Image for post
Image for post
We need to modify .dropdown-menu > li > a in our own CSS.

Your CSS File

Image for post
Image for post
Add this class selector in your CSS file.

The Result

Image for post
Image for post
Our list items now have white text.

Conclusion

Self-Employed Software Developer, Trainer, Consultant. Keeping up to date. I’ve noticed in over 28 years of programming, one’s current skills have a shelf life.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store