My web application doesnt currently use Bootstrap or any other framework. I am now looking at making it more polished and realizing that the effect I want to achieve is quite Bootstrap like (i.e rounded buttons).
So if I now add Bootstrap to my website I have two questions
Will it leave my website unchanged until I start referring to Bootstrap components.
Can I use Bootstrap components without have to use the Bootstrap grid system
Can I override Bootstrap using CSS or do I have to use LESS which I dont understand
Q 1. Will it leave my website unchanged until I start referring to Bootstrap components.
Ans: Its totally depends on what classes, you have used in your HTML.
For example if you have used class="btn" and then add bootstrap to your app, it will defiantly try to override the CSS, because Bootstrap has that class defined in its css file.
Q 2. Can I use Bootstrap components without have to use the Bootstrap grid system.
Ans: You can use Bootstrap components without using its Bootstrap grid, but if you are using bootstrap best is it properly,
Because Grid system is something which provide your web app responsiveness.
Q 3: Can I override Bootstrap using CSS or do I have to use LESS which I dont understand
Ans: Yes you can.For example
If you already have class
`.btn-primary{
color: #eee;
background-color: #337ab7;
border-color: #2e6da4;
border: 2px solid transparent;
border-radius: 2px;
}` in your app.
Then you added bootstrap and it also has this class in its library like:
`.btn-primary{
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
border: 1px solid transparent;
border-radius: 4px;
}`
and overriding your class.
So what you can do is, just use !important in your css for attribute which is conflicting. Like:
`.btn-primary{
color: #eee !important;
background-color: #337ab7;
border-color: #2e6da4;
border: 2px solid transparent !important;
border-radius: 2px !important;
}`
Now the HTML engine will always pick your CSS
Q3: you can override it with higher specificity. That means if the your use the class btn from bootstrap you can add your own own class like my-btn and then reference it in your css like
.btn .my-btn{
color:#123456;
}
Hope that helps
Related
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 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.
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.
I am using a plugin on one of my pages and there seems to be a small conflict with bootstrap and the css of the plugin.
Here is an image of the issue:
Are you can see, the two selects are pretty long and they are on two seperate lines. The CSS code from Bootstrap that is causing that is:
select {
background-color: #ffffff;
border: 1px solid #cccccc;
width: 220px;
}
When I turn that attribute off in the Firefox Console, it renders it normally.
How can I go about ignoring the width in the select without messing with the core CSS?
Make an new rule that will override the last one.
select {
width: initial;
}
if you want this rule to apply only to that specific select, and not all of them, just give it an id, and use the width:initial rule in it's rule set
I am customizing bootstrap using less. I want to add a shadow to the .navbar.
My solution is as follows:
//Import of bootstrap core navbar - second as to save specificity
#import "bootstrap/navbar.less";
//Overrides:
.navbar {
position: relative;
min-height: #navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: #navbar-margin-bottom;
border: 1px solid transparent;
border-bottom: 1px solid #FFF;
-moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888;
box-shadow: 0px 3px 10px #888;
//Prevent floats from breaking the navbar
&:extend(.clearfix all);
#media (min-width: #grid-float-breakpoint) {
border-radius: #navbar-border-radius;
}
}
This way I do not modify bootstraps original source, and it will be easy to update bootstrap, however the new navbar class receives higher specificity than all bootstrap classes. So the following:
<div id="navigationbar" class="navbar navbar-default navbar-static-top" ng-cloak ng-controller="NavController">
The navbar border-radius will override navbar-static-top an the result is round corners.
If i import the bootstrap/navbar.less after I define my own class it does work. But is there a better solution?
I wonder if your problems really have to do with CSS specificity.
You Less code will be read from top to bottom (only for variables last declaration wins).
Bootstrap defines the .navbar class first and than the style classes (.navbar-default) and position classes (.navbar-static-top).
When the .navbar-default override some styles of the .navbar class you undo this overrides by defining the .navbar class again after .navbar-default.
As far as i understand you only need the following Less / CSS code:
.navbar.navbar-default {
-moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888;
box-shadow: 0px 3px 10px #888;
}
Demo: http://www.bootply.com/VhEmBcAYhY
Cause the Bootstrap navbar classes do not declare the box-shadow property at all, you can add this code anywhere in your Less code.
Good location you this code seems at the end of bootstrap.less or even navbar.less. Or create a custom.less file and import that at the end of bootstrap.less.
The easiest thing I've found, and this is what we do where I work, is to NOT use the Bootstrap LESS files, and instead using the minified CSS. Since you're ONLY overwriting Bootstrap styles, NOT changing the source styles, it will make it much easier.
With LESS, since you are nesting styles within styles, you'll find that if the styles aren't nested exactly as Bootstrap has them (since you're trying to override them), that their styles may be more specific, and therefor take precedence over your styles.