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;
}
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;
}
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.
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).
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; )
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.
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/)
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";
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">Hey</li>
<li class="list-group-item">I was doing</li>
<li class="list-group-item">Just fine</li>
<li class="list-group-item">Until I met you</li>
<li class="list-group-item">I drink too much</li>
<li class="list-group-item">And that's an issue</li>
<li class="list-group-item">But I'm okay</li>
</ul>
</div>
<div class="col-sm-8" style="background-color: blue">
right
</div>
</div>
</div>
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.
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.
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'
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');
});
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;
}
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;
}
Related
So I have this navbar:
<nav class="navbar navbar-default" style="background: black; margin-bottom: 0;">
And it's working fine. However when I'm trying to change styles in external CSS file instead of inline:
.navbar-default {
background: black;
margin-bottom: 0;
}
They are not working at all. CSS file is working fine since I checked and bg pictures are changing. I have problem only with navbar and can't figure it out. According to this: Change navbar color in Twitter Bootstrap 3 I'm doing everything fine. It's first time I'm having this issue. Working with bootstrap if anyone is wondering :)
Any help guys? I dont want to use inline css.
You need to override the Bootstrap classes, Use !important to get it work
.navbar-default {
background: black !important;
margin-bottom: 0 !important;
}
Note: If you use !important all other rules used in your CSS cannot override this declaration.
Chances are your styles are being overridden as these styles are being set elsewhere. The C in css stands for cascading. See the cascading order section of this page
The easy option is to simply include your stylesheet after the bootstrap one.
Of course you can override this precedence by adding !important to the end of your style rules but this breaks some of the functionality of CSS and can become difficult to maintain.
I think default bootstrap navbar style is applying so try !important in front of property value.
.navbar-default {
background: black !important;
margin-bottom: 0 !important;
}
I have faced same problem and after searching alot i have found that as navbar-default is default class of bootstrap and its not overloaded by external css file.You can use !important property of css that will help you to load external css file when there default class are overloaded.
.navbar-default {
background: black !important;
margin-bottom: 0 !important;
}
I have bootstrap.css and login.css attached to index.php. Within index.php there are several form elements such as input type['text']. However, both attached CSS files target input type['text']. I have bootstrap.css linked above my other css file:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
How can I specify that I want input type['text'] to use the rules specified within login.css rather that using the rules from bootstrap.css? I generally require bootstrap.css more, but do with to now and then, implement my own rules which I cannot since the rules from bootstrap.css are rendered first since it is listed first.
The more specific you define your css, the more priority it gets in CSS.
You need to define your custom rules more relevant than the bootstrap ones.
Example:
p.test {
color: green;
}
.test {
color: blue;
}
<p class="test"> teststring </p>
You see that p.test is stronger than .test though .test comes after p.test.
hope that helped.
if your remove the p from p.div you will see the color gets blue, because the order is only relevant if both rules are equal in specificty.
.test {
color: green;
}
.test {
color: blue;
}
<p class="test"> teststring </p>
well, there is something like "CSS Rule Hirarchie" in you can use for your disired effekt. In short: The most "upper" CSS Rule wins the Game.
If you Develop with Chrome or FF you can Debug anything with the Developer Tools (i love the chrome one in this case) and look why it's getting overwritten by Bootstrap. Mostly it's a CSS Level Rule or somthing like this.
I would suggest you using your own Class on the Wrapper Element and override the styles as you wish. Give a look on my Example below to get an Idea how I mean it.
Sidenote: I think this Tutorial from CSS-Tricks describes well whats going on with the Rules of CSS and how the most specific rule comes in to the game.
/* Just a Basic Styling */
ul { list-style:none; }
a { text-decoration: none; font-family: Verdana; color:black; }
/* Lets make all list elements Blue. This should be familiar for you,
* this is the standard overwriting of css classes (is this called so?).
*/
.list li a { color: blue; }
/* Look at this Example now, we specify the 3rd list Element.
* As this rule is more specified as the rule from line 9,
* this rule takes effect on the 3rd line, the other ones will stay blue.
* +
* As a proof that you can't "override" this rule, I have put one
* line below to show you, that even another low lvl rule can't override it.
* Line 20 is still more specified then Line 21, even it is comes after it.
*/
.list li:nth-child(3) a { color:pink; }
.list li a { color:blue; }
/* Another Example of higher CSS Hirarchie would be this line.
* We go one DOM Element even higher, and guess what:
* If you comment out this line here, it will take effect.
*/
/* .wrapper li:nth-child(3) a { color:seagreen; } */
<div class='wrapper'>
<ul class='list'>
<li><a href='#'> Magic Link </a></li>
<li><a href='#'> Another Link </a></li>
<li><a href='#'> Rule over the wrapper Link </a></li>
</ul>
</div>
This is my css file, till now I have made a simple navigation bar.
But the point is for my <a> elements in the navigation bar, when I try to style them both in case a and a:hover they work only when I give !important. What is happening. Is there a specificity issue ?
#import url('http://fonts.googleapis.com/css?family=Lato');
.navbar {
background-color: #b6b5b4;
border-style: solid;
}
.container {
background-color: #bfbfbf;
}
body {
font-family: Lato;
}
a {
color: black !important;
font-weight: bold;
}
.navbar-right {
background-color: #aeaeae;
}
a:hover {
background-color: #dfdfdf !important;
}
I am new to css and html.
You imported Bootstrap, which has default CSS styling. What you're basically doing, is trying to overwrite those styles. However, Bootstrap seems to be taking precedence over your CSS (probably due to the order of the imports in your HTML file), thus requiring !important. The !important tag makes sure that, that particular style cannot be overwritten or, is always displayed over others.
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
If your ordering is like this, Bootstrap styling will be displayed, unless you use !important.
What is happening is parent divs like .container (may be, dont have your html structure) is having background-color css. This css will override the hover css on child <a> element. !important keyword is made only for this purpose. It does not allow other styles to override itself. Thats why you should use !important keyword in such cases.
a:hover { background: #dfdfdf !important;}
use this one
You have default css file with styles with its nesting! quick fix for this issue: assign class for <a> with your styles!
a.my-class {
color: black;
font-weight: bold;
}
a.my-class:hover {
background-color: #dfdfdf;
}
Yes, If u give like this
a {
background-color: black !important;
}
!important overrides the hover state styles also.
a {
background-color: dfdfdf;
}
doesn't work.
give your style like this
a {
background-color: black;
}
//remove !important
remove !important from <a> tag. Hover state works normally.
Let me know if u get any errors.
Problem
I have a site built with my own styles and it looks just the way I like it. However, I want to add extra functionality by adding a custom dialog box downloaded from BootBox.
However the extensive style sheet that comes with it and is needed absolutely murders my site, butchering it in every way.
Is there anyway i can stop this by making the BootBox.css only apply to its little part of my code and not all of my site?
You can use LESS wich is what bootstrap uses.
Example:
#ContainerWithBootboox {
#import (less) "bootstrap.css"; //import bootstrap
}
Doc: http://lesscss.org/
If you only want the bootbox css to target a specific div, you'd need to prepend each bootbox css rule with the class of the target div.
So if you had
<div class="bootbox">
<!-- bootbox html here -->
</div>
and the bootbox styles were
h1 {
color: red;
padding: 0;
}
h2 {
color: blue;
margin: 10px 0;
}
Then you'd need to change it to
.bootbox h1 {
color: red;
padding: 0;
}
.bootbox h2 {
color: blue;
margin: 10px 0;
}
That said, if the bootbox css is thousands of lines of code then this may be labour intensive. It might be a matter of finding which rules specifically are borking your code and adding a specifier class to only those rules.
Not labour intensive, with the help of LESS or [SASS] (http://sass-lang.com),
If you use LESS, just wrap all bootbox css rules inside a parent root. For e.g.:
.bootbox {
/*move all bootbox CSS rules here*/
h1 { color: inherit;}
.someclass { color: red;}
}
It will be compiled into:
.bootbox .h1 { color: inherit }
.bootbox .someclass {color:red;}
You could put the BootBox code within an iframe. The css loaded by the iframe would only apply to the content within the iframe. I have used this strategy to only apply bootstrap to certain areas of my page such as tables, while leaving the rest of the page untouched.
I have main.css file where I define standard size for inputs:
/* Describe general input element sizes */
input[type="text"], input[type="password"]
{
width: 180px;
border: 1px solid #aaa;
}
This CSS referred in header of the page. Later in page I define following:
<style>
.shortField {
width: 50px;
}
</style>
I assign class "shortField" to my input box but size is not applied. F12 screenshot:
The specificity of the first selector is 0-0-1-1, the second selector's specificty is 0-0-1-0, which means the first selector will override the second.
To override the initial selector, you only need to match the original specificity, as the second selector is later in the cascade.
The following selector should be enough to override the match with input[type="text"], I've listed .shortField twice so that it will continue to match cases where it was used on non input elements.
.shortField,
input.shortField {
width: 50px;
}
An alternative would be:
body .shortField {
width: 50px;
}
Be very careful when raising the specificity of selectors. It's very easy to get into specificity games where you end up writing nonsensical styles like:
#foo #bar #baz #fizz #buzz .lorem .ipsum ul li a {
margin-left: 0 !important;
}
Try to use the lowest specificty selectors that you possibly can.
You need to learn about specificity...
The least specific stylesheet is what you link (External file)
They styles you declared between document head tag is more specific than an external stylesheet
And last but not the least, inline styles are MOST specific
And so in order to over ride, use !important(Don't use it if you don't know what it does and how it works) declaration or use more specific CSS selector like the one below
input[type=text].shortField { /* This is more specific than simple element selector */
/* Styles */
}
It is because the styles in your main.css file are more specific than in your html head.
If you really need to override it try doing this:
.shortfield {width: 50px !important;}
Might help you to understand the hierarchy of importance for CSS.
Inline > Embedded > External
Inline styles are anything within style="" and override any styles specified from embedded, or external stylesheets.
Embedded styles are styles within <style> within the <head> of the document. They are overridden by inline, but override external.
External styles are written in external files, and are overridden by either embedded or inline.
My theory is that you have styles overriding your external stylesheet.