Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Be A Design Ninja: 4 Ways To Customize Bootstrap Effectively

May 15, 2014

2 Min Read
Reading Time: 2 minutes

For the past couple of years, Bootstrap has become an integral part of web designing and development. If you want a responsive site to be ready in quick time, then Bootstrap is the way to go.

bootstrap design

In this article, I will provide four easy tips for the Bootstrap newbies.

Choose only what you need

Bootstrap has several components. There’s a very little chance that you will be using all these components in a single application. So when starting your project, don’t download the full package.

Instead, visit the Bootstrap Customizer and choose only the components that you’ll be using in your application or website. This would benefit you in many ways:

  • You will get faster page load.
  • You will receive better ranking on page analyzers, like Google Insights.

Make it your own

When you use Bootstrap, your site starts to look exactly the same as thousands of other sites. This is a major drawback of Bootstrap.

To overcome this problem, try to customize the theme as much as possible. Creating your own themes using Bootstrap is much easier. Have a look at the sites listed, like Bootswatch and Built With Bootstrap.

You can also get ready-made Bootstrap themes. For free themes, Bootswatch is an excellent place to check them out. If you want paid themes, WrapBootstrap is great.

Understand the Bootstrap Grid

Creating a true responsive website is much more than just including the Bootstrap CSS file and using col-md-* classes. Try to learn the Bootstrap Grid system as much as possible. Using col-md-* classes will only give you a very basic responsive experience. Do mix these with col-sm-* and col-xs-* classes.

Start with the code below and observe how this works in different screen resolutions. This would help you in designing a bug-free layout for your site.


<!DOCTYPE html>
<html lang="en">

<script src=""></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"

<!-- Latest compiled and minified JavaScript -->
div{border: 1px solid #CCCCCC;}

<div class="col-md-4">first</div>
<div class="col-md-4">second</div>
<div class="col-md-4">third</div>

<div class="col-md-4 col-sm-4">first</div>
<div class="col-md-4 col-sm-8">second</div>
<div class="col-md-4">third</div>

<div class="col-md-4">first</div>
<div class="col-md-4 col-xs-4">second</div>
<div class="col-md-8 col-xs-5">third</div>


The helping hand

Bootstrap contains a lot of helper classes. I recommend you to check them out and use them frequently in different combination, instead of creating your own classes.  Mostly, you will be using “contextual colors”, “quick floats” and “clearfix” classes, but other classes are useful too. You should use all classes available within the Bootstrap setup.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Start Growing with Cloudways Today.

Our Clients Love us because we never compromise on these

Najmus Saqib

Najmus Saqib is currently working as Senior Software Engineer at Cloudways. He specializes in PHP, Python, and Google App Engine.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!