How to use Twitter Bootstrap to Create a Responsive Website Design

By , March 30th, 2013 , Tags: , , 4 Comments

Two things are sure if you’ll start creating responsive designs:

  1. More work – mostly more CSS code and often some JS but also lots of thinking and planning about the UI itself, how it scales, how users interact with it and so on.
  2. A whole lot of testing – this is the biggest downside. The only true way of testing responsive design is by actually using it on the devices themselves and you can imagine writing 5 lines of CSS then grabbing the iPad, loading the web, turning it landscape, oops it doesn’t look so hot when in landscape, so back to code again…ugh and you get the point.

Here comes the good part, there is an almost magical way to start creating responsive designs and it’s name is Twitter Bootstrap.

Twitter Bootstrap

Twitter Bootstrap was created by two guys at Twitter who wanted to speed up and bootstrap their workload and code. If you visit the home page of Twitter Bootstrap they define it as: “sleek, intuitive, and powerful front-end framework for faster and easier web development.” and they are not lying to you!

I’m usually not big on frameworks and like to code as much as possible myself for various reason so trust me on this one when I say it’s worth every minute you will spend learning it and that’s not going to be long.

Twitter Bootstrap offers you a lot of amazing stuff out of the box:

  • Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
  • Styles for common HTML elements like typography, code, tables, forms, and buttons, and a great little icon set.
  • Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.
  • Javascript plugins for things like tooltips, popovers, modals, and more.

But the most important part it’s really easy to learn and use, plus it has a very good documentation and all the examples a developer could dream of. So let’s dig into it.

Getting started with Bootstrap

The first thing you want to do is visit the Bootstrap download page (it might be a good time to bookmark that URL as well). You can find the docs for everything there, including some basic guides and tutorials, so I won’t waste my time explaining that.

This is important, you can download the framework from their homepage or you can download a customized version which I prefer more because you get to choose and select what you need or want. The best thing about this version is that it comes with just one CSS file with all the responsive media queries you need unlike the other version where you have one normal CSS file and a separate CSS file for media queries and a bunch of JS files which is just messy.

Customize Bootstrap

So if you hop on to the Customize Bootstrap page, you’ll see that you can turn off/on things like JS plug-ins, CSS styles, UI components, responsive queries, define fonts, colors and so on. For this article you can just leave everything by default and click on the big “Download Customized Version” button.

After you download and extract the package you will get the following:

1
2
3
4
5
6
7
8
9
10
- bootstrap/
  -- css/
--- bootstrap.css (safe to delete)
    --- bootstrap.min.css
  -- js/
    --- bootstrap.js (safe to delete)
    --- bootstrap.min.js
  -- img/
    --- glyphicons-halflings.png
    --- glyphicons-halflings-white.png

First thing you can do is delete the non-minified versions of the CSS & JS files (bootstrap.css, bootstrap.js) because i don’t think you’ll be needing to fix or edit any of the bootstrap code but also the minified versions are a lot smaller and production ready.

Next up it’s time to include them into your project. So let’s imagine we have a blank HTML file that goes something like this:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     title>No Boostrap in this project</title>
 </head>
 <body>
     <p>Hey, i wanna be responsive too :(</p>
 </body>
</html>

All you need to do to is reference the CSS file and JS file and you are bootstrapped. So for an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>With Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
 </head>
  
 <body>
    <p>Hello Bootstrap!</p>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Note: Now remember you don’t have to include any JS files for Bootstrap to function, you’ll get all the responsive features, grid and CSS styles just from the CSS file but for some parts of the framework like alerts, tabs and so on the JS files are needed. Also don’t forget to include jQuery if you’ll be using Bootstraps JS plugins.

Note 2: I always put all my JS files at the bottom of my HTML because they don’t block page rendering and CSS loading time. This is something i do because I tend to follow the ySlow and Google PageSpeed rules for fast loading websites and page optimization. If you are new to this be sure to check the links above and read about it because this is something you should already be doing.

OK now that we’ve included Bootstrap in our project we can start using all the magic that comes with it.

Bootstrap Basics

With Bootstrap you get a 12 column grid with two options:

  • fluid – if you need your app to be 100% wide and use up all the width of the screen you should choose this option
  • fixed – if you’re creating a standard website you probably won’t be needing all 100% of the screen so you chose the 940px option

Note: If you go with a fixed layout remember this: by default Bootstrap has a media query for “large desktops” so if your screen is more than 1200px in resolution the 940px grid becomes 1170px wide. You can turn this off in the customization section I mentioned earlier and just have the 940px grid be the default one. I usually leave it in because things look a lot smaller if you have a 27″ iMac.

So let’s say we want to use the fixed layout to create 3 boxes on our homepage and we’d like them to float next to each other. If you were not using Bootstrap you’d have to write some CSS for you content container, each box, add floats, clear floats, padding, margins…ugh just see the magic of Bootstrap:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
 <html>
 <head>
         <meta charset="utf-8">
         <title>Getting started with Bootstrap</title>
         <link rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css">
 </head>
 <body>
        
 <div class="container">
        
         <div class="hero-unit">
         <h1>Awesome responsive layout</h1>
         <p>Hello guys i am a ".hero-unit" and you can use me if you wanna say something important.</p>
         <p><a class="btn btn-primary btn-large">Super important &raquo;</a></p>
         </div><!-- .hero-unit -->
      
 <div class="row">
         <div class="span4">
         <h2>Box Number 1</h2>
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
         <p><a class="btn" href="#">Click meeee &raquo;</a></p>
         </div><!-- .span4 -->
  
         <div class="span4">
                 <h2>Box Number 2</h2>
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
         <p><a class="btn" href="#">Click meeee &raquo;</a></p>
         </div><!-- .span4 -->
  
         <div class="span4">
                 <h2>Box Number 3</h2>
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
         <p><a class="btn" href="#">Click meeee &raquo;</a></p>
         </div><!-- .span4 -->
  
 </div><!-- .row -->
 </div><!-- .container -->
    
 </body>
</html>

That’s it! We have 3 boxes with some nice default styling and as a bonus we added some content in front of the boxes to make it more sexy. Best part, everything is responsive, just try to resize your browser. (This is the point where you stare in the screen with a tear in your eye)

Responsive Layout

Let’s break it down a bit:

  • < div >< /div > – this one is a must have and it serves as a wrapper for all your page content. The most amazing thing is if you want to use a fluid layout just add container-fluid instead of container and that’s it.
  • < div >< /div > – another must have for creating rows is a column wrapper that takes care of margins, padding and floating clears. Again if you are using a fluid layout just replace row with row-fluid and you’re good to go.
  • < div >< /div > – a DIV with class span* is basically a column and in this case we want to have 3 boxes in one row so if we do simple math 12/3=4 and you get span4.
  • < div >< /div > – this is just another component of Bootstrap we added to make this sample more cool.

As you can see with only 3 CSS classes you already know the basics. The only thing you will be changing are .span classes and they can go from 1 to 12 depending on how wide you want your box/element to be. So a DIV with a “span12” class would be 1170px wide on large desktops, 940px wide on laptops, and smaller for tablets or phones.

For a more complicated example check out the Bootstrap examples.

With only this you can already create your responsive layout in a matter of minutes but it doesn’t stop there, if you dig into Bootstrap docs you’ll see there are UI components like: navbars, tabs, accordions, dropdowns, buttons and so much more. Be sure to check out the Bootstrap Components page for all the greatness.

Another good thing about Bootstrap is that you can use a bunch of standardized and cool JS plugins like modals, tabs, accordions, sliders which work great with the default Bootstrap style but are also responsive and fully customizable.

(Source)



  • http://www.dazf532min.com Gale Coskey

    I simply want to say I’m beginner to blogging and certainly loved this website. Almost certainly I’m going to bookmark your website . You absolutely have awesome articles. Thank you for sharing your webpage.

  • http://hqdedicated-server.com/story.php?title=tina-mcmahon-|-activity-streams-|-bihar-chaupal Hosea Jargas

    I really like your writing style, wonderful info , thanks for putting up : D.

  • Ricky Orlando

    so if we want a fixed layout use “container” and “row”
    else if we want a responsive layout user “container-fluid” and “row-fluid”

    ?

  • k.lary

    Great intro to bootstrap, thanks!





Author:
I am proficient in Adobe Photoshop, HTML, HTML5, Jquery, Joomla template designing, WordPress template designing , CSS, CSS3 and other graphic programs and applications. While creating site designs I try to work closely with the clients and pay much attention to preparatory work. I possess strong communication skills and I believe that the ability to conceptualize Internet ideas is as important as the technical professionalism of a web designer.

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.



Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.



Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.