I have some styles in my custom CSS to override bootstrap CSS, but it seems they can not override bootstrap CSS. When I checked the styles using chrome developer mode I can only see bootstrap styles being applied!
Here is a screen shot of my chrome bootstrap:
Here is what I have in my css:
.panel-default>.panel-heading {
color: #333;
background-color: #f5f5f5;
border: 10px solid #b03636;
}
.panel-heading {
padding: 10px 15px !important;
border: 10px solid transparent !important;
border-top-left-radius: 3px !important;
border-top-right-radius: 3px !important;
}
Am I missing anything?
Thanks,
One thing you should check first: Go through all the styles and see whether the ones in your custom CSS are found at all. If so, they'll likely be crossed out to imply that they were overwritten by the bootstrap styles. If not though, that means that for one reason or another it's not finding your styles at all, and that's where the problem lies.
If they're definitely being overwritten, I might also recommend making sure that the custom CSS is being called after the bootstrap files.
Link your CSS file to HTML properly and import after bootstrap CSS like below so, you no need to write !important for all things to overnight.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
I think the problem is that your css file is properly linked or not linked at all to your HTML page. You should check that first
First make sure your custom CSS is loaded after the Bootstrap CSS file and if it does not help, Use !important attribute with custom CSS to force the overriding.
Related
I am trying to make the horizontal rule to be have border-style dotted on my site. But for some reason, it doesn't happen as long as there is bootstrap-5 cdn embedded. I also tried it on codeply and it works fine until I add the Bootstrap-5 Framework, at which point the border-style reverts back to normal. Here is the CSS I'm applying on the horizontal rule which has the class "horizontal-rule".
.horizontal-rule{
width: 5%;
border-style: dotted none none;
border-width: 7px;
}
Could someone enlighten me as to why this is happening and how I can solve this?
Bootstrap likely has its own styling for <hr> you'll need to open something like Developer tools to see what CSS you need to add to your declarations to override what Bootstrap defines in order for your styles to work.
Also, make sure that you're including your custom CSS After the bootstrap CSS so that your rules take precedence.
I am basically trying to build a chrome extension where I will be displaying my modules in all the sites.
Basic extension usage -
When I click on my extension there will be many popup modals which will be rendered in websites.
Problem -
These extension popup modals as a specific set of CSS which is being overwritten by the site CSS.
Sass Approach -
To avoid overwrite in css from existing site to extension I used the following approaches,
CSS Specificity
Where I had a parent class for my extension modal and inside it I will be writing all my css classes.
.parent{
& .header{
//css properties
}
}
CSS reset
Where when loading my extension all basic elements will be set to initial
input[type="text"]{
all:initial;
border-radius: 3px;
padding: 8px 10px;
width: inherit;
border: 1px solid #c8ccd0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
visibility: inherit;
font-weight: 200;
line-height: 0;
}
Using !important
All these approaches I tried but still there are few cases where my CSS is being overwritten by the existing sites.
Failure Cases -
For example - In my extension modal if I have a button element and I have given background-color as blue
button{
background-color:blue;
}
In the site where the extension is loaded as a property of
button{
background-color:red !important
}
Then it automatically takes the site property and its being overwritten in my extension css.
Solution Needed
It will be great if someone provides me a idea how to use a css for extension so that its not going to be affected by existing sites CSS.
Make sure when you write css you either follow
BEM(Block Element Modifier) technique.
You can give a specific pefix to the css class or id.
You can try injecting custom html tags which you can then use to point the styles out.
You could do with writing the CSS more specifically to prevent the !important tags overwriting your CSS.
For example:
div.CLASS-NAME > button.CLASS-NAME {
background-color: blue;
}
Might be worth reading up on CSS specificity - http://tutorials.jenkov.com/css/precedence.html
I am making a django web application where I have base.html and base_bootstrap.html files. My base_bootstrap.html file contains the following two lines to use bootstrap CSS:
<!-- Bootstrap core CSS -->
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
.
.
.
<!-- Custom styles for this template -->
<link href="http://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">
Is there a way for me to modify the following css in order to change the #999 into a # without creating a separate css file?
pre {
border: 1px solid #999;
page-break-inside: avoid
}
You can always override external css by using either internal css on the page or the inline css specifically to the HTML element.
Example:
.card
{
margin:5px;
padding:25px;
border: 1px solid #999;
display:inline-block;
width:50px;
background:#ddd;
}
.card{
border:2px solid #f00;
}
<div class="card"></div>
You can also use !important to override any css with the HTML element.
Example: border:2px solid black !important;
DEMO
Refer to: https://css-tricks.com/specifics-on-css-specificity/
Use Internal CSS
You can override the color code by declaring it again in your HTML page again.
pre {
border: 1px solid #999;
page-break-inside: avoid
}
pre {
border-color:#878;
}
Your pre tag have now a border-color at #878.
But, if you can change the nativ color code, change him.
Hope this will help you.
You can download the the SASS version and modify the parts you want or include a custom file with modifications / extra styles you want, then rebuild bootstrap with the gem installed or create your own Grunt/Gulp script to build the SASS to CSS.
https://github.com/twbs/bootstrap-sass
BS is originally built in LESS which would work too.
It's my first time using a bootstrap theme with my ASP.net web application, thus I've been having some difficulties with the CSS editing.
I got this bootstrap template online, and in order to accommodate my needs I want to change the color of the footer div to another color. Here's the code in html
<div class="footer_bottom">
<div class="copy">
<p>Copyright © 2014</p>
</div>
</div>
and here's the css
.footer_bottom {
padding: 2em 0;
/*background: #7cc4cc;*/
background: #5DBCD2;
}
Basically, I wanna change the color of the div from #7cc4cc to #5DBCD2. When I run my page in google chrome and select the inspect element option the code supposedly works, but in the css properties backgroud: #7cc4cc is slashed out above the line background: #5DBCD2 (which is not slashed out) but the color of the div shown is still #7cc4cc. In short I can't change the CSS color properties of the theme for some reason. Any help would be greatly appreciated.
You could learn a lot by reading about CSS Specificity. CSS is about rules on top of rules, so what I think is happening, is that some rules are getting applied over your:
.footer_bottom { background: #5DBCD2; }
Check for any rules that have higher specificity and make this .footer-bottom declaration higher than that.
The !important solution in the other answers is not something you want to do. Over time these things are going to bite you in your ass, as they blow your specificity through the roof.
Use !important to override bootstrap styles:
.footer_bottom {
padding: 2em 0 !important;
background: #5DBCD2 !important;
}
You are trying to override the bootstrap css so you need to add !important to your background color change like so :
.footer_bottom {
padding: 2em 0 !important;
/*background: #7cc4cc;*/
background: #5DBCD2 !important;
I want to get rid of outlines in Firefox, however they're pointed more deeply than my style.css in bootstrap3.css so I need to update them all.
I've tried the following:
<link href="{{ URL::to('home_assets/css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ URL::to('home_assets/css/style.css') }}" rel="stylesheet" media="screen">
Example below didn't work because Bootstrap 3 points more deeply.
//bootstrap
a.carousel-control
{
outline: thin dotted;
}
//my css
body {
outline: none !important;
}
Result: a.carousel-control has thin dotted outline.
I need to do something like to remote outline. (and it works)
a.carousel-control
{
outline: none;
}
The problem is, then I need to point everything in markup deeply so it overrides bootstrap. I need to encapsulate most of Bootstrap's css.
Is there a functionality like this in CSS, so I can manage them from a single place?
body {
outline: none !override-previous; //pseudo
}
Any hacks or tricks to manage them in a single place? (no javascript, css expressions are okay though)
Ps. I need this for my dev environment because I keep outlines as default on production to help blind users. They're annoying for me, though.
You can try
*{
outline: none !important;
}
and please add this after your bootstrap.css file so that it'll override.