Thursday 23rd October 2014,
Maurizio Conventi

Responsive Web Design with Twitter Bootstrap

Maurizio February 8, 2012 Responsive design 11 Comments

Twitter Bootstrap 2.0 layout becomes fluid and this is a good news for developers.
The Responsive Web Design is the practice to use fluid layouts and media queries to create designs able to adapt according to the user’s screen resolution. It allows to eliminate the need to create different designs (read templates) for each device (that in these days means desktop, netbook, tablet and mobile).

If you want to read more about the Responsive Web Design approach I suggest a couple of articles from Smashing Magazine and Design Modo.

Twitter Bootstrap gives you a fluid grid layout (the default grid system is a 940px-wide, 12-column grid but you can customize it here) and many css components to create a responsive design in few minutes. It means that you create your design using the Twitter Bootstrap grid and components then the toolkit modifies and resizes columns width, headings, texts and images according to the user device resolution.

For this post I created a simple “marketing design” starting from the marketing design given with the library. I added a dropdown in the toolbar and a carousel (useful for example to show few screenshots).

NOTE: The example uses twitter bootstrap v2.2.2. I am going to update the code to Twitter Bootstrap 3. Subscribe to the mailing list in order to be notified when the new version will be available.

I promise that I won’t sell your email or send you spam ;)



Download the complete code example using the button below.

I think that the Twitter Bootstrap toolkit (as also my example) can be a really useful starting point to create your own design, mainly to create a Minimum Viable Product. After that you can add your personal style avoiding to create an other Twitter clone ;)

Like this Article? Share it!

11 Comments

  1. Miguel Paraz April 30, 2012 at 13:24

    Hi,
    Thank you for the useful example.
    I got it to work on mobile after adding the viewport meta tag:

    I did not know this was needed, at firs.

    Thanks.
    Miguel

  2. Michele April 30, 2012 at 17:18

    thanks for the good post! I’d like to report you an integration between Bootstrap and a masonry layout.
    http://openlastminute.it

    • Maurizio April 30, 2012 at 17:40

      Sure, it could be really interesting, if you want you can create a guest post!

      Thanks,
      Maurizio

  3. Joung May 10, 2012 at 17:48

    Maurizio, I’ve download your sample, host on my web .. but it seem that it’s not working at all.

    • Maurizio May 10, 2012 at 18:39

      Hi Joung, did you try it in local on your computer?

  4. Kevin Braun May 29, 2012 at 17:29

    Like Miguel says above. For this to work on mobile you need to add the viewport meta tag to the head of the index file.

    That said thanks for doing this…it’s a great example to quickly get from nothing to responsive :)

    • Maurizio May 30, 2012 at 20:30

      Guys you are right and thank Kevin! I’ve just updated the package, so now the file index.html contains the viewport metatag.

  5. Mark Hallam November 5, 2012 at 06:27

    How can I add padding on spans (columns)? so that I can have color behind them with spacing around content?

Leave A Response