How to use Twitter Bootstrap to Create a Responsive Website Design

Create your web site with Bootstrap - web design sri lanka

"Welcome to the responsive web!" In the last year or so this term has been thrown around everywhere, so often that even a lot of my clients are asking for a responsive design from the get go. This, to me, is really interesting because they never asked for a mobile or tablet version back in the day.
One would argue that mobile wasn't so mainstream and everybody was trying to imitate the IOS interface on the web, and I agree, it was bad, but that's not the only reason why clients are asking for responsive!? Somehow they think we turn responsive design on or off as we please and that it's just normal to have, so the price should stay the same. Well, it's not that easy.

How to use Twitter Bootstrap to Create a Responsive Website Design

Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.
The idea of responsive design relies on CSS3 media queries that target specific screen resolutions and sizes. Now media queries have been around for a while, but we used them to target print styles, mostly. With CSS3 they kind of evolved and became actually useful.
Fun fact: today you can even write a media query for devices that weigh let's say 3KG. Crazy, right?
Two things are sure if you’ll start creating responsive designs:

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.
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 - Your New BFF

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.

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:

- 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:

<!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:

<!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:

<!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 class="container" >< /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 class="row" >< /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 class="span4" >< /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 class="hero-unit" >< /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.

Extending Bootstrap

Bootstrap by itself comes packed with most of the stuff a regular front-end developer would need, especially a beginner but for those more advanced guys or pros here are a few plugins or hacks that made my life easier:

jQuery UI Bootstrap Theme
This is something a lot of front-end developers use when building modern and interactive designer so a suitable jQuery UI theme is a must have. I have tested this myself and it really works well and accompanies the Bootstrap design as it should.
Bootstrap Colorpicker
Another great plugin for Bootstrap to handle color picking in an awesome way.
Fbootstrapp
Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.
Forms inside Bootstrap Dropdowns
This is more of a hack but it really comes handy if you wanna have login forms in those simple to use Bootstrap Dropdown menus.
Font Awesome
If you are more of an icon guy when building UI elements then this custom font that is made of icons is gonna make you smile. Over 70 icons made especially for bootstrap in one CSS file
BootBox
Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter's Bootstrap modals.

Going crazy with Bootstrap

So you're maybe thinking: “This is all cool but Bootstrap has a too generic design and i just don’t see it working with my super custom and awesome designs”. Stop right there and let me tell you that you are wrong. You can use Bootstrap with any design and in any case. I had clients approach me with existing code and CSS but no responsive layout and in a matter of a day or two I managed to turn their website into a responsive one.
A great example is my company's portfolio over at flip.hr.
flip.hr

When you visit the site most of you would never even think that this is built on Bootstrap because the design is so customized and different but yet again everything was done on top of Bootstrap. But indeed it is, and I’ll name a few of components we used: navbars, hero units, thumbnails, buttons, modals, base styles and so much more. We also knew we wanted to have a full screen experience on our website so we used Bootstrap’s fluid layout which saved us a lot of time so we could focus more on the design and UI itself.
Another good thing about Bootstrap is that it’s very flexible and plays nice with almost everything. For an example on our website we included some more stuff like: layout centering, lazy loading of images, hardware acceleration for page transitions, custom modal loaders for Bootstrap, a lot of CSS3 transitions, transforms and effects. We also wrote some media queries of our own because we wanted things to look and feel the same on all devices but most of it still comes from the power of Bootstrap. This kind of a website would take us months to make and test on all devices and resolutions, this way we could focus more on the design, functionality and SEO stuff.

Secrets of the PROs

Adobe Edge Inspect
Edge Inspect was just recently released and it enables you to preview and test designs on IOS and Android devices, oh and did I mention it all does that remotely :) This’ll save you a lot of time and help you produce better and faster responsive features.

Viewport Resizer
Another great new tool for testing your websites responsiveness. This is a browser based tool (bookmarklet to be exact) so no additional download or set up is required. just click and go.

Responsive Images

So basically there are a few approaches to responsive images that actually work. Most of the guys I know use Filament Group’s responsive images technique but adaptive images is also a good way just a bit of a different concept. So until the HTML5 spec gets some something better and native, read up on these three links:

Misc

So this is also something that might come in useful when working on responsive designs. The Fittext plugin is really cool but hopefully you won't have to use it often and the Responsive Slides plugin is the best one out there.
Fittext

Responsive Slides

Bonus and More Resources

HTML5 Boilerplate
This is a great HTML5 template for all front-end developers. It’s basically a set of tips, hacks and best practices for front-end development. I use this in most of my projects, of course in time you will pick the parts you need but all in all a must have and a must read.

Foundation framework
This is something I managed to find out during the writing of this article. I have checked this out for a few minutes and it looks to be a possible alternative to Bootstrap. Foundation as they say is the most advanced responsive framework out there and it has a lot of the features that Bootstrap has with some added bonuses. Be sure to check this out also.

courtesy: http://www.onextrapixel.com/2012/11/12/how-to-use-twitter-bootstrap-to-create-a-responsive-website-design/

How to use Twitter Bootstrap to Create a Responsive Website Design

Create your web site with Bootstrap - web design sri lanka