Layout and Responsive Design with Twitter Bootstrap

by Miles Matthias on May 2, 2012

Some of you may have noticed some websites look great on any device. You visit a website on your desktop computer, enjoy using their services, and then leave your desk for the day. Later while you’re out moving around, you remember you need to update your account on your favorite website. You only have your phone with you, but you decide to give it a shot. Lucky enough, the website you enjoyed on your desktop has magically transformed into something that feels comfortable to use on your phone. All of the same features are there, along with the site’s look and feel. It’s an easy transition between devices, and since it’s the same site, you spend hardly any time at all figuring out how to update your account with your phone. (For an example, check out our website, InspiringApps.com on any device or just by resizing your browser window.)

Now you want that same easy device transition for your websites. Today I’ll talk about how to do just that. If you want to do everything by hand, you can do everything manually, but there is a great front-end framework that has everything you need built in: Twitter Bootstrap. If you need an introduction to Twitter Bootstrap, check out my introductory post, “First Impressions of Twitter Bootstrap.”

With Bootstrap, you first need to decide which layout you’d like to use when viewing your website from a large screensize like a desktop. There are two options: fixed and fluid.

The fixed layout has a 940px-wide, centered layout when viewing it from a desktop. That means that no matter how large a screen, the content of your website will always be contained in 940 pixels centered on the screen. This is great for the vast majority of websites. When using this layout, you use the container class to signify where your content will go:

<body> 
 <div class="container"> 
 ... 
 </div> 
</body> 

Credit: Twitter Bootstrap Documentation

Another advantage of using this layout is that it’s customizable. You can change the number of columns and adjust the pixel width of the columns and gutters.

Instead of having a 940px-wide content view, the fluid layout allows you to have content that always spans the entire width of a window. Elements in your page are sized with percentages instead of fixed pixel values, so that they scale proportionatly with the user’s screen size. This type of layout is generally best for sites that need a sidebar, like documentation or other certain applications. When using this layout, you use the container-fluid class to signify sections of your content:

<body> 
 <div class="container-fluid"> 
 .. 
 </div> 
</body> 

Credit: Twitter Bootstrap Documentation

For each of these layouts, you need to setup the organization of your website in the desktop size using Bootstrap rows and spans. For the default, fixed layout, your code should look something like this:

<div class="container"> 
 <div class="row"> 
 <div class="span4">
 ...
 </div> 
 <div class="span8">
 ...
 </div> 
 </div> 
 ... 
</div> 

For the fluid, percentage-based layout, your code should look something like this:

<div class="container-fluid"> 
 <div class="row-fluid"> 
 <div class="span4">
 ...
 </div> 
 <div class="span8">
 ...
 </div> 
 </div> 
 ... 
</div> 

Once you’ve decided which layout to use, it’s time to get that seamless transition between devices when viewing your website. It’s time to get responsive. When a website automatically adjusts itself in order to give the user a comfortable experience for whatever size device they’re using, we say that the website is “responsive.” The first step is place the following meta tag in the header of your HTML page:

<head> 
.. 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
.. 
</head> 

When the user loads your page in their browser on their device, this tag tells the browser to adjust the viewport (the visible part of the browser where your website loads) to be the same width as the device. Then, with the initial-scale option, it tells the browser to proprotionatly zoom the page to best display the website for that device screen size. It basically makes everything more readable, but does nothing to present the best layout or user interface controls for that specific device.

To change the layout of your website for different devices, you need to have your style sheets know how to style your page for specific sizes. In CSS, you use a thing called a @media query. Luckily, Twitter Bootstrap has that all built in. All you need to do is include Twitter Bootstrap’s responsive stylesheet:

<link rel="stylesheet" href="responsive.css" /> 

If you’ve correctly setup your page with containers, rows, and spans, Bootstrap will automatically adjust the layout for each device you’re viewing the website on.

One note of caution: place the responsive.css link as the last stylesheet link in your header. Responsive.css needs to be able to override styles from your other stylesheets in order to provide a good layout for a specific device. You’ll end up with unusual results when viewing your web page on smaller screens if you don’t link the responsive stylesheet last.

To further customize your website for different devices, you can use Twitter Bootstrap’s built in device size recognition to hide and show items. Bootstrap provides the following classes to show and hide elements for specific device types:

Credit: Twitter Bootstrap Documentation

For example, if you use a different date picker on the desktop version of your site than you do for mobile versions, you would use visible-desktop on the desktop version date picker and hidden-desktop on the date picker for phones and tablets.

While it is possible to do all of this manually using @media queries (in fact, that’s what Twitter Bootstrap does), it’s a great advantage to be able to have a framework that has all of that code already there and is constantly being updated by a large team of people to use the latest and greatest industry practices.

7 comments

[...] Layout and Responsive Design with Twitter Bootstrap « APPTITUDE. Tweet Pin It About iancrowther [...]

by Layout and Responsive Design with Twitter Bootstrap « APPTITUDE | Responsive Design on July 2, 2012 at 12:10 pm. #

When i resized the browser for your app i did not see the navigation bar collapse with a button which does happen on bootstrap website itself.

Great job though. Thanks for the post.

by kaushik on July 10, 2012 at 12:37 am. #

Hi! Thanks for the comment! We actually don’t use Twitter Bootstrap quite yet on our main website, but we gained a lot of knowledge about it through using it elsewhere. I think our website is still a great example of a responsive layout. Thanks for the comment!

by Miles Matthias on July 10, 2012 at 2:10 pm. #

Is it possible to use Bootstrap’s responsive.js, in a script, to test for device being used then insert custom HTML (like a different sized image) into the page? This would be in addition to the custom CSS set with @media queries.

So far, the only way I can see to accomplish this, is by using another JS utility, like Syze, to do the testing.

Any ideas?

by Robert on July 19, 2012 at 1:01 am. #

Twitter Bootstrap has some CSS classes they call “Responsive Utility Classes” where you can set rules to only be applied for certain devices. Look at the bottom of the docs page about scaffolding: http://twitter.github.com/bootstrap/scaffolding.html

If you wanted to set some background image rules for some divs for certain devices, you could do it in your CSS with those classes. Hope that helps!

by Miles Matthias on July 19, 2012 at 2:50 pm. #

I found just what I was looking for, as far as images go, in Scott Jehl’s PictureFill approach.

But I would still like to know if there is a built-in, or custom, function that can be used for device type testing…

by Robert on July 19, 2012 at 5:32 pm. #

You’re welcome! Glad we could help! :)

by Miles Matthias on August 28, 2012 at 4:54 pm. #