How do you override bootstrap 3 styles with external custom CSS?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet"/>
<link href = "css/styles.css" rel = "stylesheet"/>
<div class = "navbar navbar-inverse navbar-fixed-top"></div>
CSS
.navbar-inverse {
background-color: #FF0000;
}
There are a few things to consider:
Stylesheet order - The stylesheet you are trying to overwrite should come first.
6.4.1 Cascading order
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
In you case this shouldn't be an issue.
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/overwrite.css" rel="stylesheet"/>
Selector specificity - Read up on specificity (mdn).
Put briefly, you should use a selector with the same specificity (assuming it appears later and will overwrite the initial declaration), or a selector that is more specific.
Bootstrap 3's default styling uses the following for the navbar's color:
.navbar-inverse {
background-color: #222;
border-color: #080808;
}
You could try using a more specific selector:
.navbar.navbar-inverse {
background-color: #FF0000;
}
Stylesheet paths - If all else fails, your stylesheet path(s) must be wrong.
Try this:
.navbar-inverse {
background-color: #FF0000 !important;
}
Related
On my layout page, in the <head>, I have the following styles:
<link rel="stylesheet" href="/dist/vendor.css">
<style>
.bg-dark {
background-color: #240000;
}
</style>
I have added the link to my layout page. The style block is added dynamically by Angular & webpack. From what I know about CSS, that last .bg-dark class should win over any .bg-dark class declared in `vendor.css. Yet I see the following:
Is this something caused by the magical pre-rendering of Angular? Is there some way to prevent this?
The background-color attribute in vendor.css has the !important flag, which elevates its priority:
background-color: #222222 !important;
To override that setting, you should set the !important flag in your layout page CSS:
<style>
.bg-dark {
background-color: #240000 !important;
}
</style>
or remove that flag in vendor.css, if your can.
I have Bootstrap loaded and working all fine, via CDN, and I'm trying to override the bootstrap default size and color stylings for a <caption> tag. So, I've placed some css in my stylesheets/application.css file:
caption {
font-size: 150%;
color: #000000;
}
My application.html.rb head looks like this:
<head>
<title>Odot2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
Even though bootstrap is listed after the application.css manifest file the font-size css selector i defined in application.css does take effect, yet the color selector will only work if i move the bootstrap link before the application manifest link?
Why does one selector work and not the other and what is the correct way to be doing this? Thanks in advance.
Bootstrap css defines caption as:
caption {
padding-top: 8px;
padding-bottom: 8px;
color: #777;
text-align: left;
}
Note, there is no font-size there, but there is color.
In css, if the same property is defined in exactly same selector more then once, the second definition overrides the previous one. Hence if you define color first in your assets and you load bootstrap later on, bootstrap will override your definition. Since font-size is not used in bootstrap for this selector, order doesn't make any difference.
Thats how CSS works - if two rules have the same specificity than the latter rule always wins:
a.css
p { color: blue; }
b.css
p { color: red; }
--
<html>
<head>
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
</head>
<body>
<p>I'm red</p>
</body>
</html>
That's why you always place libs at the top and your overrides under. That is unless you want to start a specificity war...
The correct way, if you want to override a style defined in a library, is to put your own stylesheet after the stylesheet for the library, as you noticed.
Now the Bootstrap CSS does not define the caption color font size, so it doesn't matter where you put the size in your CSS; that's the size it will take. However, it does define the color, so in that case, the order in which the styles appear is important. The last one takes precedence.
Use the custom style CSS at the last, after bootstrap CSS..it will over write the caption style. Hope it will resolve ur issue
Just add important to your css attribute value to override default bootstrap CSS
caption {
font-size: 150%;
color: #000000!important;
}
Hope that will be quick and work for you well.
thanks
I have a stylesheet which has the following property,
.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
color:#FFFFFF!important;
}
I can't edit the stylesheet. How do I change the property to
color:#000000!important;
I tried to write the following code in another stylesheet,
.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
color:#000000!important;
}
but it did not work. Please guide. Thanks.
Other than Emmanuel's answer which talks about this: CSS Specificity, You can also try using two approaches:
Change order of stylesheet
Make sure your other stylesheet order is higher than the current version. That is include the new stylesheet link after the stylesheet which is to be overridden
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style1.css"> <!-- Styles that will overwrite -->
Inline HTML
If you can change your HTML, you can use this:
<span style="color: #000000 !important;">
!important in inline style will have higher priority than in other types of styles.
Did you try using:
.primary-nav .suppa_rwd_button span{
color:#000000!important;
}
Other way could be using JavaScript:
Override using JavaScript
$('.mytable td').attr('style', 'display: none !important');
Cheers!
In order to override an !important rule you have to put a same specific rule after the previous one or to increase specificity of new rule as:
nav.primary-nav li.suppa_rwd_button, nav.primary-nav li.suppa_rwd_button span{
color:#000000!important;
}
* suppose that .primary-nav is a nav element and .suppa_rwd_button a li element, you could change them due to your markup.
In both cases you have to also use !important in your new rule.
Reference: MDN - Specificity
When using custom css along with Twitter Bootstrap that overwrites some styles is it better to place the custom css link before or after the bootstrap-responsive css?
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">
or
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
and what are the pros and cons of each?
If I edit the body padding after the bootstrap-responsive.css like so:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
/* Add padding for navbar-top-fixed */
body {
padding-top: 60px;
padding-bottom: 40px;
}
Then I must also fix the responsive layout using a media query as I have overwritten the global body style.
/* Fix to remove top padding for narrow viewports */
#media (max-width: 979px) {
body {
padding-top: 0;
}
}
It's usually better to place your custom CSS after the Bootstrap CSS. I'd imagine that you're wanting the custom CSS to override the Bootstrap CSS.
The advantages of placing your custom styles after Bootstraps is that you can change anything that is set in Bootstraps CSS by using the same selectors that they do. Making it very easy to change minor things. If you use the same selector then the browser will use the last rules applied to an element.
I can't really see any advantages of placing the Bootstrap CSS after your custom CSS, it wouldn't really make much sense to write your own styles and then override them with Bootstrap's...
For example, this isn't bootstrap CSS, but it would work the same way, if you had the following in your head section:
<link href="framework.css" rel="stylesheet" type="text/css" />
<link href="custom-styles.css" rel="stylesheet" type="text/css" />
Then in framework.css you had the following:
div.row {
border: 1px solid #eee;
border-radius: 3px;
margin-bottom: 50px;
padding: 15px;
}
But then you realised you wanted to add a red background (why oh why...) and change the border radius, you could have the following in custom-styles.css:
div.row {
background-color: red;
border-radius: 10px;
}
The resulting CSS applied to the element would be this:
div.row {
background-color: red;
border: 1px solid #eee;
border-radius: 10px;
margin-bottom: 50px;
padding: 15px;
}
Because the styles from custom-styles.css override the existing ones in framework.css and the additional ones are applied too! :)
I think if you put style.css on top then bootstarp styles will override it.If you put style.css at bottom then bootstrap styles will be overriden with your custom styles
I like to have the navbar-inner element in my Bootstrap Layout to be customizable by the jQuery UI framework.
<div class="navbar-inner ui-widget-header">
</div>
But the background of the navbar is always black.
How can overwrite the Bootstrap Background with the background from the ui-widget-header class without changing the bootstrap css file?
Create your own CSS file which you will use to overwrite styles from the bootstrap.css and add its reference to your HTML after the reference to bootstrap.css. Also, to ensure that your styles overwrite the bootstrap ones you can use the !important keyword in your css.
So, create a CSS file and call it something like bootstrap-overwrite.css.
Add the bootstrap class you want to overwrite -
.navbar-inner
{
background: none !important;
}
Add the reference to your HTML after the bootstrap reference -
<link href="styles/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="styles/bootstrap-overwrite.css" rel="stylesheet" type="text/css" />
Twitter Bootstrap is a framework that is supposed to be restyled so you shouldn't be afraid of overwriting the default styling.
Make the ui-widget-header selector more specific, so that it overrides navbar-inner in the cascade. For example,
#pageid .navbar .ui-widget-header {
background: red;
}
Is more specific than simply...
.ui-widget-header {
background: red;
}