Overriding Bootstrap’s CSS
When you want something a bit different. Use Inspect Element.
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.
- I will assume you are familiar with the basics of using bootstrap.
- I will assume who know how to create your own CSS file.
- I will assume you know how to reference your CSS file in your HTML.
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.
Here is the bootstrap implementation in my HTML.
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.
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> — 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 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.
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.
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.