How to overwrite styling in Twitter Bootstrap

Asked 10/11, 2011 at 19:9 Answered 24/10, 2015 at 23:54

129

How can I overwrite the stylings in Twitter Bootstrap? For instance, I am currently using a .sidebar class that has the CSS rule 'float: left;' How can I change this so that it goes to the right instead? I'm using HAML and SASS but am relatively new to web development.

Cankerworm answered 10/11, 2011 at 19:9 Comment(1)

Also see: #8597294 – Whip 1/6, 2018 at 14:49

Add your own class, ex: <div class="sidebar right"></div>, with the CSS as

.sidebar.right { 
    float:right
}

Griffith answered 10/11, 2011 at 19:37 Comment(2)

Not good practice: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes – Tomokotomorrow 27/4, 2016 at 10:5

@DamjanPavlica Honestly? You still care about IE 6? Not to mention that, I think, bootstrap uses chaining. – Petulancy 19/6, 2016 at 22:3

233

All these tips will work, but a simpler way might be to include your stylesheet after the Bootstrap styles.

If you include your css (site-specific.css) after Bootstrap's (bootstrap.css), you can override rules by redefining them.

For example, if this is how you include CSS in your <head>

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

You can simply move the sidebar to the right by writing (in your site-specific.css file):

.sidebar {
    float: right;
}

Forgive the lack of HAML and SASS, I do not know them well enough to write tutorials in them.

Weinert answered 10/11, 2011 at 20:34 Comment(13)

What about the "-responsive.css" styles? Can those be overwritten in the same way? – Ithaman 18/11, 2012 at 10:24

@ClaudiuConstantin I see no reason why not. The rule of thumb is the second style will always trump the first if two are the same level of specificity. As long as your style comes after it will override. – Weinert 19/11, 2012 at 22:27

I load my style after the bootstrap's css files, but I can't override any elements unless I force it with "!important". – Conceptualize 19/4, 2013 at 7:46

@Conceptualize That probably has a lot to do with specificity. You can read up about it here (old article), but basically .sidebar.right is more specific than .sidebar. That is probably the problem. Use web inspector to figure out what's overriding it. – Weinert 21/4, 2013 at 0:55

@Weinert I'm trying to override .brand class of the navbar. So .brand{} works only with !important instead div.container > a.brand{} override correctly without !important, it's the right way to do? – Conceptualize 22/4, 2013 at 10:14

@Conceptualize yup, that's the idea. The problem with !important is that you can never override it again in the future. – Weinert 23/4, 2013 at 12:11

My Site.css is bundled up and listed in Bundle.config and rendered physically after bootstrap.css but the styles are still not overridden. I had to take the site.css reference out of the modernizer bundle and manually put that after the bootstrap.css (and press Ctrl + F5 once debugging to clear the cache) – Cayser 18/9, 2013 at 18:17

This might work but it wouldn't be best practice for production. Load 1 stylesheet per site unless there's a big reason not to. #sitespeed – Topflight 23/4, 2015 at 20:31

@BenRacicot You should minify your stylesheets for production anyway. The advice is really just "include your more specific styles AFTER Bootstrap." See also this question – Weinert 23/4, 2015 at 23:10

This won't work in many cases. CSS rules aren't prioritized based on what comes last, but on specificity levels. See #20721748 or the answer below. – Petulancy 19/6, 2016 at 22:9

@BłażejMichalik You are only partially correct. They are prioritized by both order and specificity. See item 4 of 6.4.1 Cascading Order. Most modern CSS design principles suggest that high specificity is bad. But, yes, sometimes Bootstrap has high specificity and you will need to be equally specific. I still think my answer is better than the accepted one, though. – Weinert 21/6, 2016 at 2:18

@Weinert It says that the "order of ordering" is: importance -> specificity -> inclusion order. I'm pretty sure that in most cases it would be quite hard to step on the same specificity that bootstrap uses. – Petulancy 21/6, 2016 at 17:28

@BłażejMichalik I still argue that inclusion order is your most "idiomatic" way to override (i.e. if possible, prefer that). For this specific question, that is possible. For other questions, you are, of course, correct. No inclusion order beats specificity. – Weinert 27/6, 2016 at 4:44

The answer to this is CSS Specificity. You need to be more "specific" in your CSS so that it can override bootstrap css properties.

For example you have a sample code for a bootstrap menu here:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div id="home-menu-container" class="collapse navbar-collapse">
        <ul id="home-menu" class="nav navbar-nav">
            <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
            <li><a href="#intro">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">What We Do</a></li>
            <li><a href="#process">Our Process</a><br /></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

Here, you need to remember the hierarchy of the specificity. It goes like this:

Give an element with an id mentioned 100 points
Give an element with a class mentioned 10 points
Give a simple element a single 1 point

So, for the above if your css has something like this:

.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */

So, even if you have defined the .navbar a after .navbar ul li a it is still going to override with a red colour, instead of a green since the specificity is more (13 points).

So, basically all you need to do is calculate the points for the element you are wanting to change the css for, via inspect element on your browser. Here, bootstrap has specified its css for the element as

.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
    color: #999;
}

So, even if your css is loading is being loaded after bootstrap.css which has the following line:

.navbar-nav li a {
    color: red;
}

it's still going to be rendered as #999. In order to solve this, bootstrap has 22 points (calculate it yourself). So all we need is something more than that. Thus, I have added custom IDs to the elements i.e. home-menu-container and home-menu. Now the following css will work:

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

Done.

You can refer to this MDN link.

Witching answered 12/12, 2013 at 11:30 Comment(3)

What if they're tied? – Mucker 23/5, 2015 at 20:34

It doesn't matter, for example '.abc.xyz' means, there is an element with class 'abc' and 'xyz' - it will still take it as a single element with a class. Thus, 10 points. same goes for an ID. – Witching 25/5, 2015 at 15:53

This was the trick for me. I was having trouble over-riding the blockquote style in the Bootstrap CSS. Strangely, it was wrong for normal blockquotes but looked right for and <ul> within a blockquote. The key was updating my CSS to have blockquote p, which gave enough priority. The <ul> was doing this for the other section of the page. – Steapsin 9/2, 2016 at 3:9

Add your own class, ex: <div class="sidebar right"></div>, with the CSS as

.sidebar.right { 
    float:right
}

Griffith answered 10/11, 2011 at 19:37 Comment(2)

Not good practice: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes – Tomokotomorrow 27/4, 2016 at 10:5

@DamjanPavlica Honestly? You still care about IE 6? Not to mention that, I think, bootstrap uses chaining. – Petulancy 19/6, 2016 at 22:3

You can overwrite a CSS class by making it "more specific".

You go up the HTML tree, and specify parent elements:

div.sidebar { ... } is more specific than .sidebar { ... }

You can go all the way up to BODY if you need to:

body .sidebar { ... } will override virtually anything.

See this handy guide: http://css-tricks.com/855-specifics-on-css-specificity/

Landgravine answered 10/11, 2011 at 19:50 Comment(1)

This is actually the best answer – Jolt 10/3, 2015 at 11:15

You can just make sure your css file parses AFTER boostrap.css , like so:

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

Politico answered 24/10, 2015 at 23:54 Comment(0)

If you want to overwrite any css in bootstrap use !important

Let's say here is the page header class in bootstrap which have 40px margin on top, my client don't like it and he want it to be 15 on top and 10 on bottom only

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

So I added on class in my site.css file with the same name like this

.page-header
{
    padding-bottom: 9px;
    margin: 15px 0 10px 0px !important;
}

Note the !important with my margin, which will overwrite the margin of bootstarp page-header class margin.

Stovall answered 17/2, 2014 at 5:20 Comment(1)

Note that using !important is somewhat of an anti-pattern. Read more here: james.padolsey.com/css/dont-use-important – Unschooled 13/8, 2015 at 3:40

Came across this late, but I think it could use another answer.

If you're using sass, you can actually change the variables before you import bootstrap. http://twitter.github.com/bootstrap/customize.html#variables

Change any of them, such as:

$bodyBackground: red;
@import "bootstrap";

Alternatively if there isn't a variable available for what you want to change, you can override the styles or add your own.

Sass:

@import "bootstrap";

/* override anything manually, like rounded buttons */
.btn {
  border-radius: 0;
}

Also see this: Proper SCSS Asset Structure in Rails

Incognizant answered 20/11, 2012 at 21:44 Comment(0)

I know this is an old question but still, I came across a similar problem and i realized that my "not working" css code in my bootstrapOverload.css file was written after the media queries. when I moved it above media queries it started working.

Just in case someone else is facing the same problem

Leafage answered 3/4, 2013 at 5:44 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags