How can I override Bootstrap CSS styles?

Question

I need to modify bootstrap.css to fit my website. I feel it's better to create a separate custom.css file instead of modifying bootstrap.css directly, one reason being that should bootstrap.css get an update, I'll suffer trying to re-include all my modifications. I'll sacrifice some load time for these styles, but it's negligible for the few styles I'm overriding.

Hw do I override bootstrap.css so that I remove the style of an anchor/class? For example, if I want to remove all the styling rules for legend:

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

I can just delete all that in bootstrap.css, but if my understanding about best practices on overriding CSS is correct, what should I do instead?

To be clear, I want to remove all those styles of legend and use parent's CSS values. So combining Pranav's answer, will I be doing the following?

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

(I was hoping there's a way to do something like the following:)

legend {
  clear: all;
}

Just make sure your own css loads after the bootstrap css. – José Rasmussen Sep 12 '22 at 20:18 — José Rasmussen, Sep 12 '22 at 20:18

score 604 · Answer 1 · edited Jun 05 '19 at 12:31

604

Using !important is not a good option, as you will most likely want to override your own styles in the future. That leaves us with CSS priorities.

Basically, every selector has its own numerical 'weight':

100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: If the element has inline styling that automatically wins (1000 points)

Among two selector styles browser will always choose the one with more weight. Order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.

Your option is to inspect Bootstrap sources, find out how exactly some specific style is defined, and copy that selector so your element has equal priority. But we kinda loose all Bootstrap sweetness in the process.

The easiest way to overcome this is to assign additional arbitrary ID to one of the root elements on your page, like this: <body id="bootstrap-overrides">

This way, you can just prefix any CSS selector with your ID, instantly adding 100 points of weight to the element, and overriding Bootstrap definitions:

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}

edited Jun 05 '19 at 12:31

DeveloperDan

4,626
9
40
65

answered Dec 30 '14 at 11:13

smugglerFlynn

6,504
1
18
10

1

since IDs can only be used once, why not make `#bootstrap-overrides` a class? – chharvey Aug 19 '15 at 03:07
3

@chharvey: because you would end up having to calculate better. if it were a class in this example it would be prio 11 and if the css definition would be after the bootstrap.css then we would be good to go. However this would be pretty close and setting it as an id which boosts the prio big time, we don't have to worry about calculating prio and testing as hard whether we have it always right. easier with an id if you want to definitively overwrite the default. – hogan Sep 11 '15 at 06:15
just made my day. i know this and still get stuck trying to figure out why my styles aren't interpreted. – hogan Sep 11 '15 at 06:17
6

Are the points you mentioned (100 for id's, 10 for classes/pseudo classes, 1 for tag selectors/pseudo elements) literal, or did you just make those values up for this example? – Kyle Vassella Jul 20 '17 at 19:17
2

Your explanation is good, it makes sense as a way to explain it to someone new to css, but is misleading. The correct name for what you mentioned is css `specificity` which defines the "weight" of each css selector. Here some more details about it: https://css-tricks.com/specifics-on-css-specificity/#article-header-id-1 – Adriano Oct 16 '18 at 06:11
Would it be possible using this approach to simply add the id="bootstrap-overrides" to the element thus making the whole page use custom css when available – kerry Jan 12 '19 at 01:50
Your approach is not a good practice at all, your approach needs heavy manipulation in markup files and adding id's to every element, when it became a good practice. – Nikhil Jun 20 '19 at 07:51
Excellent answer, I had 3 buttons which were reduced to 60% on screens less than 1200px. so I used #bootstrap-override-1,#bootstrap-override-2,#bootstrap-override-3 It's so rare to do this I didn't mind repeating the code and I needed to further customize #bootstrap-override-3 anyway. – domdaviesdev Nov 23 '20 at 22:01
@KyleVassella I looked it up because I had the same question. The values the above user mentioned for specificity (1, 10, 100) are indeed correct. See this section on W3: https://www.w3schools.com/css/css_specificity.asp#:~:text=Memorize%20how%20to%20calculate%20specificity,always%20given%20the%20highest%20priority! – Omar Shishani Jul 28 '23 at 14:15

score 120 · Answer 2 · edited Jun 24 '22 at 03:29

In the head section of your html place your custom.css below bootstrap.css.

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

Then in custom.css you have to use the exact same selector for the element you want to override. In the case of legend it just stays legend in your custom.css because bootstrap hasn't got any selectors more specific.

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

But in case of h1 for example you have to take care of the more specific selectors like .jumbotron h1 because

h1 {
  line-height: 2;
  color: #f00;
}

will not override

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

Here is a helpfull explantion of specificity of css selectors which you need to understand to know exactly which style rules will apply to an element. http://css-tricks.com/specifics-on-css-specificity/

Everything else is just a matter of copy/paste and edit styles.

Can you show us how to do this in scss? I'm trying to override a BS class style in scss by doing this method and it doesn't work. — KYin, Apr 17 '22 at 02:32

score 31 · Answer 3 · edited Aug 28 '18 at 02:24

31

It should not effect the load time much since you are overriding parts of the base stylesheet.

Here are some best practices I personally follow:

Always load custom CSS after the base CSS file (not responsive).
Avoid using !important if possible. That can override some important styles from the base CSS files.
Always load bootstrap-responsive.css after custom.css if you don't want to lose media queries. - MUST FOLLOW
Prefer modifying required properties (not all).

edited Aug 28 '18 at 02:24

TylerH

20,799
66
75
101

answered Dec 21 '13 at 16:54

Rahul Patil

5,656
6
37
65

14

since `bootstrap-responsive.css` no longer exists, does this still stand true, or is this no longer relevant? – Shaun Wilson Jan 31 '17 at 00:38

Paramasivan · Answer 4 · 2013-12-21T17:01:57.503

29

Link your custom.css file as the last entry below the bootstrap.css. Custom.css style definitions will override bootstrap.css

Html

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

Copy all style definitions of legend in custom.css and make changes in it (like margin-bottom:5px; -- This will overrider margin-bottom:20px; )

edited Dec 21 '13 at 17:01

answered Dec 21 '13 at 16:50

Paramasivan

781
3
12
27

Yes, I did that already. Sorry my question wasn't clear. My question was asking what to do in custom.css to override styles from bootstrap.min.css. – Alex Dec 21 '13 at 16:59
What if I'm also using bootstrap-theme.min.css? – Quasaur Aug 20 '15 at 01:32
Worked for me, even with min css – mimi Jul 12 '19 at 06:18

Carol Skelly · Answer 5 · 2021-12-09T15:41:07.563

Update 2021 - Bootstrap 4 and Bootstrap 5

There are 3 rules to follow when overriding Bootstrap CSS..

import/include bootstrap.css before your CSS rules (overrides)
use more CSS Specificity (or equal) than the Bootstrap CSS selectors
if any rule is overridden, use !important attribute to force your rules. If you follow rules 1 & 2 this shouldn't be necessary except for when using Bootstrap utility classes which often contain !important as explained here

Yes, overrides should be put in a separate styles.css (or custom.css) file so that the bootstrap.css remains unmodified. This makes it easier to upgrade the Bootstrap version without impacting the overrides. The reference to the styles.css follows after the bootstrap.css for the overrides to work.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

Just add whatever changes are needed in the custom CSS. For example:

legend {
  display: block;
  width: inherit;
  padding: 0;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  white-space: initial;
}

Note: It's not a good practice to use !important in the override CSS, unless you're overriding one of the Bootstrap Utility classes. CSS specificity always works for one CSS class to override another. Just make sure you use a CSS selector that is that same as, or more specific than the bootstrap.css

For example, consider the Bootstrap 4 dark Navbar link color. Here's the bootstrap.css...

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}

So, to override the Navbar link color, you can use the same selector, or a more specific selector such as:

#mynavbar .navbar-nav .nav-link {
    color: #ffcc00;
}

For example: https://codeply.com/p/FyQapHImHg

When the CSS selectors are the same, the last one takes precedence, which it why the styles.css should follow the bootstrap.css.

This doesn't seem to say anything new; several existing answers discuss putting your styles in a new CSS file that loads after the Bootstrap CSS files. — TylerH, Aug 28 '18 at 02:26
@Zunair #mynavbar is the id of the `navbar`, and the *parent* of the `navbar-nav` — Carol Skelly, Dec 09 '21 at 15:41

score 9 · Answer 6 · answered Aug 28 '18 at 04:57

To reset the styles defined for legend in bootstrap, you can do following in your css file:

legend {
  all: unset;
}

Ref: https://css-tricks.com/almanac/properties/a/all/

The all property in CSS resets all of the selected element's properties, except the direction and unicode-bidi properties that control text direction.

Possible values are: initial, inherit & unset.

Side note: clear property is used in relation with float (https://css-tricks.com/almanac/properties/c/clear/)

score 6 · Answer 7 · answered Aug 05 '19 at 20:12

See https://bootstrap.themes.guide/how-to-customize-bootstrap.html

For simple CSS Overrides, you can add a custom.css below the bootstrap.css

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

For more extensive changes, SASS is the recommended method.

create your own custom.scss
import Bootstrap after the changes in custom.scss

For example, let’s change the body background-color to light-gray #eeeeee, and change the blue primary contextual color to Bootstrap's $purple variable...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

score 4 · Answer 8 · edited Aug 28 '18 at 02:25

4

A bit late but what I did is I added a class to the root div then extends every bootstrap elements in my custom stylesheet:

.overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}

<div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>

edited Aug 28 '18 at 02:25

TylerH

20,799
66
75
101

answered Dec 10 '17 at 08:35

mr5

3,438
3
40
57

Does body tag reside in div tag? – Subrato Pattanaik Nov 03 '20 at 11:11
@SubratoPatnaik it should not. – mr5 Nov 04 '20 at 07:02
How can we override the css for the body element? It is good practice to use id instead of class selector? Can you help me with this? – Subrato Pattanaik Nov 04 '20 at 07:20
@SubratoPatnaik Iook at the top-most answer of this question. Overriding CSS rules this way have a lesser priority over id. Maybe? Try it. – mr5 Nov 04 '20 at 07:41

Victor Häggqvist · Answer 9 · 2018-10-18T19:25:16.827

3

If you are planning to make any rather big changes, it might be a good idea to make them directly in bootstrap itself and rebuild it. Then, you could reduce the amount of data loaded.

Please refer to Bootstrap on GitHub for the build guide.

edited Oct 18 '18 at 19:25

answered Dec 21 '13 at 17:11

Victor Häggqvist

4,484
3
27
35

Depending on the extent of required customization this could be the simplest option. For example, changing any theme colors would require so many overrides that I'd rather opt for a template change, and custom build. – David Kirkland Sep 18 '14 at 14:55
@alex Bump sources and rebuild? – Victor Häggqvist Oct 29 '15 at 16:07
2

IMHO - My personal rule is to NEVER EVER modify the source files in CSS, JS or any other lib - In today's world there should always be a graceful workaround, otherwise you get into problems updating your sources. – G-Man Aug 18 '20 at 14:55

score 1 · Answer 10 · edited Dec 31 '19 at 10:14

1

I found out that (bootstrap 4) putting your own CSS behind bootstrap.css and .js is the best solution.

Find the item you want to change (inspect element) and use the exact same declaration then it will override.

It took me some little time to figure this out.

edited Dec 31 '19 at 10:14

Prathamesh Doke

797
2
16
38

answered Nov 25 '17 at 10:21

Henry

1,242
1
12
10

score 0 · Answer 11 · answered May 26 '22 at 03:01

for ruby on rails users--

in your application css file, make sure the bootstrap file is mentioned first then the custom css stylesheet. This way the latter CSS code that you wrote overwrites the former. Use !important if needed as well

 *= require 'bootstrap.min'
 *= require_self
 *= require 'name_of_your_stylesheet'

score -1 · Answer 12 · edited Dec 31 '19 at 08:57

Inspect the target button on the console.
Go to elements tab then hover over the code and be sure to find the default id or class used by the bootstrap.
Use jQuery/javascript to overwrite the style/text by calling the function.

See this example:

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });

score -4 · Answer 13 · answered May 25 '18 at 07:10

Give ID to legend and apply css. Like add id hello to legend() the css is as follw:

#legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

score -10 · Answer 14 · answered May 29 '17 at 02:04

-10

Use jquery css instead of css . . . jquery have priority than bootstrap css...

e.g

$(document).ready(function(){
        $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    


);

 instead of

.mnu
{

font-family:myfnt;
font-size:20px;
color:#006699;

}

answered May 29 '17 at 02:04

Ajeet Sankhwal

1

7

HTML should be used to provide structure, CSS should be used to provide style, and Javascript (including jQuery) should only be used to provide interactivity. Using jQuery to override styles is counter to the principles of good architecture, and will be extremely confusing to anyone trying to work on the code 6 months from now. – Stephen R. Smith Jul 15 '17 at 21:44

How can I override Bootstrap CSS styles?

14 Answers14

Linked

Related