Menu
Can you override Bootstrap CSS? If you want to customize your Bootstrap site, leave the source code as-is and simply add custom code in an external stylesheet. The code in this external stylesheet will override the existing styles, as long as it's set up properly.
To override the CSS properties of a class using another class, we can use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.
At Twitter, Bootstrap has quickly become one of our many go-to front-end tools when starting new applications and sites.
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.
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:
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.
Add your own class, ex: <div class="sidebar right"></div>, with the CSS as
.sidebar.right {
float:right
}
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/
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With