Overriding Bootstrap’s CSS

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

gravity well
Oct 20 · 4 min read
Image by Nathan Dumlao on Unsplash

As a Software Developer and Trainer, students are often memorized by bootstrap’s abilities.

Bootstrap is a great tool, although implementing your own CSS along with it is important too.

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

In this short article I will demonstrate how to find and alter, by using your own CSS, one part of one of bootstrap’s classes.

Caveat: Although this is useful at times, if bootstrap changes their implementation, your CSS might break.


Assumptions

  • I will assume you are familiar with the basics of using bootstrap.

Problem to be solved

On my web site, I have a bootstrap dropdown menu in my bootstrap navbar.

The text in the dropdown list is black or dark gray by default. I’d like it to be white.

The list item text is black or dark gray. I want white.

Here is the bootstrap implementation in my HTML.

The HTML with bootstrap classes.

Solution

Admittedly, their are many solutions to this but I want to focus on just one. Overriding bootstrap.

Assuming you have your own CSS file as well as bootstrap implemented, the first task is to inspect the element that you want to modify.

From the HTML we can see it is the list items, <li> tag. More specifically, the anchor, <a> tag.

While running the web page, right click on one of the lines of text in the dropdown menu and choose Inspect Element.

We only need to inspect one.

In Firefox, you will see something like this on the left pane.

So far so good. We are in the drop down and on a <li> tag — list item.

So far so good. We are in the drop down and on a <li> — list item, which by looking at the HTML, is what we want.

Looking further at an <li> element in the HTML we see the anchor tag <a> for each item and the class being implemented by bootstrap, class=”dropdown-item”.

We need to dig just a bit deeper to see the actual syntax of the CSS item we want to modify.

Looking to the pane to the right, Filter Styles, we see the element reference and class applied by boostrap.min.css.

We need to modify .dropdown-menu > li > a in our own CSS.

We can now see the element to override or more importantly the class element to be overridden and the property to change, color. Notice the color is a very dark gray. I want it white.

In the right-side pane, Filter-Styles, highlight and copy, .dropdown-menu > li > a.

This is what we must override.

Your CSS File

In your own CSS file, simply paste .dropdown-menu > li > a and complete the CSS with the small change to the color property.

Add this class selector in your CSS file.

This will apply to all list items, <li>, with an anchor tag, <a> in the dropdown menu with the “dropdown-menu” class applied.

Be sure to reference your CSS file in your HTML and we are done. Refresh your web page and you will see the result.

The Result

Our list items now have white text.

Conclusion

Inspect Element is great for tracking down CSS issues as well as other things. It can also give us insight in to the actual item and syntax to use in our CSS for the item we wish to override.

This article will eventually be added to my dropdown menu and the text will be white!

Thank you for reading and I hope you found this informative.

gravity well

Written by

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade