How to use Twitter Bootstrap to Create a Responsive Website Design

How to use Twitter Bootstrap to Create a Responsive Website Design

“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

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:

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

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:

- 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

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.

Adobe Edge Inspect

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.

Viewport Resizer

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
Fittext

Responsive Slides
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.

HTML5 Boilerplate

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.

Foundation Framework

Here are some other useful resources related to Twitter Bootstrap.

Conclusion

I hope I managed to introduce Bootstrap to you in a good way and that you would give it a try. Remember it will not make you a website if you don’t know anything but it will sure as hell help you a lot if you know something.

Vendran is a young guy from Croatia who is passionate about front-end development and web. He enjoys creating awesome front-end code and user experiences. He is also fluent with PHP and MYSQL and basically all-in-one guy for everything web.

Comments

  1. / Reply

    One of the best Bootstrap tutorials I’ve come across after the one by Design Shack. Keep bringing more of these please :)

    • SC,
    • November 13, 2012
    / Reply

    Yes I agree this must be one of the easiest Twitter Bootstrap guides on the web. The techniques are fantastic and we may have to apply some into our new redesign.

    • jask,
    • November 13, 2012
    / Reply

    The best tutorial about Bootstrap.

    Thanks for your work :D

    • Hans (Nijmegen, The Netherlands),
    • November 16, 2012
    / Reply

    Thanks so much for this great article, have bookmarked all links and will G+ it asap.
    Hans

    • rds,
    • November 17, 2012
    / Reply

    Nice intro to bootstrap. Looking forward to using this in my upcoming projects.

    Good Job!

    • John,
    • December 12, 2012
    / Reply

    Great tutorial! Really helped me clear things up! :-)

  2. / Reply

    Great Article! Love the resources that were also provided!

    • Dylan,
    • December 22, 2012
    / Reply

    Thanks your great article, it really helps for beginner to understand about bootstrap. I also have a question about your company’s website. How did you transform the different pages? Do you have some recommended articles? Thank you.

    1. / Reply

      Hey Dylan, glad you like the article. To answer you question this is the peace of CSS code responsible for animating page transitions. Every “page”on our website is a HTML sections element, that has 100% width and height, and basicly you just move them around, you bring one up front,you hide the others. Feel free to check out the code on the live website:

      .page {
      width: 99%;
      height: 100%;
      position: absolute;
      overflow: hidden;
      z-index:2;
      -webkit-box-shadow: 4px 0 3px 1px rgba(0, 0, 0, 0.4);
      box-shadow: 4px 0 3px 1px rgba(0, 0, 0, 0.4);

      -webkit-transform: translateX(-101%);
      -moz-transform: translateX(-101%);
      -o-transform: translateX(-101%);
      -ms-transform: translatex(-101%);
      transform: translateX(-101%);

      -webkit-transition: all .6s ease-in-out;
      -moz-transition: all .6s ease-in-out;
      -o-transition: all .6s ease-in-out;
      -ms-transition: all .6s ease-in-out;
      transition: all .6s ease-in-out;
      }

      .page:target {
      -webkit-transform: translateX(0%);
      -moz-transform: translateX(0%);
      -o-transform: translateX(0%);
      -ms-transform: translatex(0%);
      transform: translateX(0%);
      }

      NOTE: CSS transformations are used to speed up things on iPhone,iPad and use the hardware acceleration of the devices.

    • Prashanth,
    • December 31, 2012
    / Reply

    Well written article….. simple but fantastic!! Thank you

  3. / Reply

    I was looking for the tutor on Bootstrap and found it over here.. Thank you..

    • Brad,
    • January 10, 2013
    / Reply

    Nice tutorial. Posted it in the Twitter Bootstrap Google+ community here: https://plus.google.com/communities/110370020620457615447

    • Hayden Lee,
    • January 11, 2013
    / Reply

    Firstly great article. However I believe your ‘fun fact’ regarding the max-weight css media query is false however. It is given in the W3C specification as an example of something that ‘wouldn’t’ work.
    Thanks for your work!

    • Simon,
    • January 17, 2013
    / Reply

    Awesome article Vedran! Thanks for the numerous quality links you provided, you rock!

    • L,
    • January 29, 2013
    / Reply

    Just intro to TB, but thx.

  4. / Reply

    Thank you guys for the comments, i am glad you like the article and glad it was of help ; ) This is yet unoffical but i may be writing a book about Bootstrap, be sure to check out my website for updates on that. THx again.

  5. / Reply

    Thanks for the helpful explanation of what all bootstrap is about. The links are excellent too.

  6. / Reply

    Great article my compatriot. Really easy to follow an funny when you say: “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)”…Pozdrav iz Madrida and kep up the great work…

    • Andre,
    • March 3, 2013
    / Reply

    This is an awesome article, very detailed!

    I have a doubt. Lets say I would want some more padding in these 3 boxes, what would you do? Another css for your customs or edit the original bootstrap?

    thx

    • shasha,
    • March 6, 2013
    / Reply

    hai!!!

    • Emma,
    • April 5, 2013
    / Reply

    Great introduction to Bootstrap, exactly what I was looking for. Thanks!

    • dane,
    • April 10, 2013
    / Reply

    really cool article with some awesome tools! thank you..

    • aditya,
    • April 16, 2013
    / Reply

    superb article

  7. / Reply

    Great Article

    • yepi,
    • April 22, 2013
    / Reply

    i like bootstrap .it is one very beautiful theme, flexible easy customization simple, it’s because I’ve been one for some decent money from amazon. thanks you

    • Kuhandoas,
    • April 24, 2013
    / Reply

    Thank U, Your post is Awesome,
    Let me try…!

    • Ryan,
    • April 26, 2013
    / Reply

    This is the best blog post I have read all month, Vedran. Thank you so much. These resources on using Twitter bootstrap to create a responsive website design are absolutely invaluable– cannot do without. Thank you so much! Your conclusion is spot on, by the way…

      • Vedran Cindrić,
      • May 15, 2013
      / Reply

      Thx Ryan glad you like the article and the links.

    • putaoren,
    • May 14, 2013
    / Reply

    very good,building site with bootstrap is fast and energy-saving,so cool

    • Vedran Cindrić,
    • May 15, 2013
    / Reply

    Hi Ryan,
    i know it’s not renedering good in IE8 and to be honest i have no intentions of fixing it. It might sound harsh but i consider IE 6, 7, 8 to be old browsers that shouldn’t be used especially if you wanna create something good. I know you might not agree but i would have to spend days fixing the IE code and replacing gradients, PNGs, round corners with images and a bunch of JS code that in the end would cover 1% of users and i don’t find that attratcive.

    • Sudhakar,
    • May 22, 2013
    / Reply

    great article dude.keep posting…)

    • Dimitris H. Seisoglou,
    • June 2, 2013
    / Reply

    Use a modern browser. It’s 2013.

    • Christian Zavrtak,
    • June 5, 2013
    / Reply

    I find it rather ironic that his pages design breaks if you snap it to use half the screen because of the right sidebars.

    • uday,
    • June 8, 2013
    / Reply

    very nice article
    thanks..,,

    • borkbork,
    • June 30, 2013
    / Reply

    Cheers. Moving from as3 to html5 this was a great intro.

    • Chris,
    • July 12, 2013
    / Reply

    Do you use HTML5 Boilerplate even when you are using Bootstrap?

      • Vedran Cindrić,
      • July 13, 2013
      / Reply

      No i don’t, since Bootstrap includes a CSS reset and some CSS defaults. But you can combine, nothing bad will happen. I use modernizer which is a part of HTML boilerplate. Don’t forget to read the new tutorial published yesterday: http://www.onextrapixel.com/2013/07/12/i-got-99-problems-but-bootstrap-aint-one/

    • Helena Asmus Lim,
    • August 12, 2013
    / Reply

    What a great article Vedran. I know nothing about bootstrap and just came across the term by accident. And found you when I googled it. I still know next to nothing but at least some pieces are beginning to fall into place. Thanks for a clean and informative post.

  8. / Reply

    awesome, very helpful for designers who wants to learn bootstrap quickly. Bootstrap is very easy to learn and implement , i also did learn in few days. I learn with video tutorials, didn’t find this post earlier. Here is the playlist for twitter bootstrap video tutorials , http://vidinterest.com/playlist/enbeeone3/twitter-bootstrap-video-tutorials

      • AppFull Blows goats,
      • March 3, 2015
      / Reply

      I found it ironic that you already have a no-no in your responsive theme for that site. You need to set a minimum with for ul and li items, so that right size does not end up too smashed to be readable next to your picture. I always on responsive sites make p, ul, and li have min-width: 100px.

    • Rony,
    • August 18, 2013
    / Reply

    Great tutorial. Thank you very much.

    • envira,
    • August 29, 2013
    / Reply

    Thanks man, you really gave an inspiring tutorial , and i have now started making my own themes.
    Thank you,
    regards

    • gaurav,
    • September 2, 2013
    / Reply

    I have a question. Can bootstrap make website automatically responsive after apply…..

  9. / Reply

    I am trying Bootstrap for my new project, and this is very useful article to me as a starter, thanks :)

    • Cris H. Mill,
    • October 29, 2013
    / Reply

    Thanks Vedran!! I’m starting on TB and your article was really useful.

    • arvind,
    • December 7, 2013
    / Reply

    hi

    But all github links are broken and how I can downlaod it

      • aidanoxp,
      • December 8, 2013
      / Reply

      Hi Arvind, the links has been updated. Do check it out.

    • Sanjay Upadhyay,
    • January 20, 2014
    / Reply

    i just prectice responsive

  10. / Reply

    Amazing Tutorial Guys. I’ll try it

    • bhanu,
    • March 7, 2014
    / Reply

    this is the best description one can ever give to a newbie like me.. beautifully written in an amazingly style… the way u plotted the things step by step is fabulous… great work ..

  11. / Reply

    This was great! Currently I’m using Unsemantic, but lately I’ve not been thrilled with the approach. I’ll definitely be trying this out.

    • zhangyanan,
    • April 15, 2014
    / Reply

    sorry,i want to say why bootstrap css class have no effect in my page?

    • AppFull Blows goats,
    • March 3, 2015
    / Reply

    too vague to really be useful but a good introduction anyway.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.

d
c