Twitter Bootstrap has become one of the popular css frameworks on the web. Being a significant time-saver, several thousands of websites have been built using bootstrap framework. But most of the sites using bootstrap do very little to customize them, resulting in those websites looking similar to each other. On the contrary you could easily make your site to stand out from the crowd by using some premium bootstrap themes. So how those theme developers achieve this? Well! They don't stick to the defaults. If they could do it, then you can also do it by putting on some effort.
Are you ready to give your website unique look and feel? Then come on, let me explain you how to customize bootstrap css to fit your own style and need. Luckily bootstrap provides a great foundation and employs pre-styled components, responsible grid layout and much more to facilitate rapid responsive development. So we don't have to reinvent the wheel but to change the css styles of those components.
Recommended Read: Build Fancy Carousel Image Slider using Twitter Bootstrap
Customize Bootstrap CSS Styles
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.
I assume you have bootstrap files ready in your work folder like this.
Override Bootstrap Styles with Custom CSS File
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.
For example, you can remove the rounded corners from the navigation menu bar like this.
.navbar {
border-radius: 0;
}
It results in the bootstrap navbar looking like this.
 |
| Bootstrap NavBar Before Customization |
 |
| Bootstrap NavBar After Customization |
Or increase the css border-radius property of the buttons to make it capsule shaped.
.btn {
border-radius: 25px;
}
Now all the bootstrap buttons will look like this.
 |
| Bootstrap Buttons Before Customization |
 |
| Bootstrap Buttons After Customization |
Note: Since we are in the development stage and not at the production level, I have used non-minified version of bootstrap files. But once you finish up the customization and move the site to production environment, try using the minified version of the files 'bootstrap.min.css' and 'bootstrap.min.js' to increase performance.
Bootstrap Custom CSS Examples
If you want to learn more about customizing bootstrap css then you can kick start with our Bootstrap Customization Tutorials.
1. Twitter Bootstrap Custom Navigation Menu Tutorial
This twitter bootstrap navbar tutorial discusses about creating a responsive navigation menu and shows you the way to customize the look and feel of the Navbar. It gives you complete css code to override the default twitter bootstrap navbar styles to a gradient menu by changing the navbar background color, text color, link colors and much more. Click here to read »
2. Customize Twitter Bootstrap 3 Breadcrumbs Tutorial
This bootstrap tutorial discusses about customizing the bootstrap 3 breadcrumbs component like changing in-between breadcrumbs separator, background color, text color etc. Click here to read »
3. Create Stylish Dashboard Vertical Menu with Icons
This is another one bootstrap customization tutorial in queue that teaches you the method to add custom dashboard menu of your choice by using bootstrap's nav-pills css component. You will also get to know about adding icons to each menu item using bootstrap 'glyphicons'. By this way you can make your own dashboard menu that fits well with the rest of your website theme. Click here to read »
4. Customizing Twitter Bootstrap Jumbotron Tutorial
Jumbotron is one of the best features of bootstrap framework which allows you to showcase the featured content of your website. You can easily create a landing page with a compelling call-to-action with the help of bootstrap jumbotron plug-in. This tutorial will teach you how to add full width background image to jumbotron along with customizing its look and feel. Click here to read »
And that was all about customizing bootstrap css framework. I have planned to write more bootstrap tutorials in the forthcoming days. So I will keep on updating this article too :).
Super informative! Thank you!!
ReplyDeleteGlad you liked it :-)
Deletethanks, its really help.
ReplyDeleteWelcome:)
Delete