I can not override the default css. Any help?
HTML:
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--Custom CSS-->
<link fref="css/custom.css" rel="stylesheet">
CSS:
.navbar ,.navbar-defualt {
background-color: red;
border-color: blue;
}
I have tried targeting .navar-custom and .navbar-inverse
EDIT: Your CSS is linked incorrectly. Change the <link fref=""> to <link href="">. So just a little typo here which explains it all.
Just to make sure you've linked your custom.css to your HTML file correctly, try to change your navigation background color like following:
.navbar-default {
background-color: #00ffff !important;
}
If that does absolutely nothing at all, your CSS file is not linked to your HTML file and you should check what's wrong with the file path.
If it works, you should go for the .navbar-default only, since you don't necessarily need to override .navbar style properties when you're already doing it for the .navbar-default.
It's now safe to say it works and remove the !important markup, since it should work perfectly well without it.
If you need to override navbar-default class, then target same class. This is working.
Let me explain you this, in your code you are using navbar, navbar-default but those two classes are relevant to same class definition, so you do not need to use ','(comma). Instead of that use '.navbar.navbar-default'. This will give you the working CSS.
.navbar-default {
background-color: red;
border-color: blue;
}
I'm trying to place a link in Wordpress quickly and we have a pretty complex style being applied to all a href links in the section. Here's a small sample of the selector and the styles within (there's about 40 lines of styles which I held back)
div.content-rotator li.featured-content a {
margin: 0px;
border: 1px solid rgb(34,56,19);
}
Is there anyway I can place a link in this li and override the parent style? It has to appear within the li with class featured-content.
I don't want to touch the existing CSS at this stage so I'd prefer to implement inline styles on the a element.
Thanks
EDIT: Just in case it wasn't clear, the CSS above is coming from the style sheet and I'd like to zero it out.
There's > 50 lines of styles in this though, I've only shown two for brevity so inline replacing them all isn't really an option.
Just use inline styles or/and add !important to overriden CSS definition, like:
<div class="content-rotator">
<ul>
<li class="featured-content">
...
</li>
</ul>
</div>
or
div.content-rotator li.featured-content a.other {
margin: 3px !important;
border: none !important;
}
Give the selected link an ID and just add !important to the styles. I don't think there is a better alternative unless you plan to go through the entire stylesheet.
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;
}
I am using the following pagination button styles provided by Twitter Bootstrap:
<ul class="pager">
<li class="previous">← Older</li>
<li class="next">Newer →</li>
</ul>
This is how they currently look like:
How do I need to change my CSS style to change the background color of these buttons from green to some other color?
I tried this CSS code, but it did not change the button styles:
.next {
background-color: #ecf0f1;
color: #2d525d;
}
Thank you!
You need to overwrite the css codes:
.next a {
background-color: #ecf0f1 !important;
color: #2d525d !important;
}
Edit: The color and background-color styles are for "a" element inside the li.
you can also add !important to your custom css
.next {
background-color: #ecf0f1 !important;
color: #2d525d;
}
Use
!important
after you css but before ;
It pretty much means ignore anything else and use THIS !important
you will need to use this to break out of default styling in some frameworks, its also useful for media queries.
I want to know the order of loading the CSS files in a HTML page.
My actual requirement is like this: I have more than 10 CSS files in my application.
I am importing some 3 to 4 CSS files in each HTML page. The problem is I have duplicate classes that defined in some CSS files. That means I override some of the CSS classes in the CSS files.
In some pages it behaves correctly. In some pages it behaves wrongly. I have inline styles defined for some of the DIVs in HTML page also. I am keeping CSS class for that DIVs also.
Can anyone know which one will take higher priority or which one loads first ?
Generally the last rule takes precedence. With that being said, there are "exceptions" in that inline styles take precedence over external stylesheets ( an inline !important is more important than an external !important, etc ), and more specific selectors override generic selectors.
Read all about it # http://www.w3.org/TR/CSS2/cascade.html
CSS files are loaded in the order that they appear in the page. If a class is redefined in a CSS file, it will override the previous class statements.
So
div.sample { background: none; width: 200px }
and
div.sample { color: #FFF; width: 400px }
will become
div.sample { background: none; color: #FFF; width: 400px }
You can also use the '!important' addin to make rules take precedence over other defined rules.
So
div.sample { background: none; width: 200px !important }
and
div.sample { color: #FFF; width: 400px }
will become
div.sample { background: none; color: #FFF; width: 200px !important }
Note: Many people will advise against using the '!important' addin in your CSS files. Personally, I see nothing wrong with it.
Each element will be rendered based on the properties from the last style-sheet from which it has been selected. Properties which have been declared as !important; are an exception. Part of the problem is that you have 10 style-sheets.