askdesign
7/3/2015 - 12:39 AM
Bootstrap - Customize with Custom Stylesheet
ASK Design's Technique
http://bootstrapbay.com/blog/customize-bootstrap/
How to Customize the Default Bootstrap Style, the Right Way
Add a Custom Stylesheet
Create a new file in your Bootstrap CSS folder and call it custom.css.
Now in the <head> portion of your website, load your new custom CSS file AFTER the default bootstrap stylesheet. It should look like this.
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
Applying Custom Styles
To modify or apply additional styling to your web page, simply add the proper code to your custom.css file.
There is no need to edit any of the original Bootstrap styles directly.
For example, if you decided that you did not like the rounded corners on the buttons, you could apply the
following style in your custom.css file.
.btn {
border-radius: 0px;
}
Now if you add a button to your web page with the default Bootstrap styles (.btn class), the corners aren’t rounded.
This is due to the fact that your custom stylesheet overrides the default Bootstrap stylesheet.
The upside to adding your own custom stylesheet after the default bootstrap stylesheet is that in the event that Bootstrap
gets upgraded, you can simply replace the Bootstrap stylesheet with the new one and your custom styles will remain untouched.
Note that for major upgrades, you may need to modify your custom styles. Nevertheless, even major upgrades will still be much
easier using this approach.
Another reason to proceed in this way is that it’s much easier to keep track of your changes and revert back to default styles
if necessary. If you make changes directly to the default stylesheet, it becomes very difficult to maintain and keep track of changes.
This method is the only way to go if you’re creating Bootstrap themes & templates.
Conclusion
As you can see, adding a separate stylesheet is a very effective way of customizing the default Bootstrap styling.
Doing so will make it much easier to update Bootstrap and keeps the code very clean.
BONUS: Check out our post on Bootstrap UI Kits, a great way to customize the default Bootstrap look and feel.http://www.kodingmadesimple.com/2015/01/add-custom-css-to-bootstrap-examples.html
How to Easily Add Custom CSS to Bootstrap with Examples
The official bootstrap site provides bootstrap custom builder to generate your own custom build of bootstrap. Also they provide the
less and sass version of the files for you to work and compile the css file to suit your requirement. But those options are not for
everyone and you should keep track of all the changes you have made going in that way. Also it gives you headache in case you want
to upgrade to higher versions of bootstrap later.
If you don't want to mess up with the core bootstrap files and want to keep out your customizations mixing up with the original code,
then follow this method which is a far better approach. The advantage of this method is that it hardly changes your workflow and will
make you free to upgrade bootstrap versions as you please.
Yes! I'm talking about overriding the original bootstrap's styles. This can be accomplished by creating a custom css file and write
your own styles for the css classes of bootstrap. Here we go.
Step-1: Inside the <head></head> section of your html file, add the bootstrap css file first.
<link rel="stylesheet" href="css/bootstrap.css" />
Step-2: Next create a file named 'custom.css' inside the css folder and add it next to the bootstrap css file like this.
<link rel="stylesheet" href="css/custom.css" />
Now you can pretty much add up your own css styles to change the look and feel of the site in the custom css file.
Note that we try to override the bootstrap css components here, so we should load custom css file after loading
bootstrap css. Else you won't get the desired result.
Step-3: Now include the jquery library and bootstrap js files as usual just above the </body> element.
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
Done! You are ready to override the css styles by adding custom css to bootstrap classes.