Responsive Mobilization with Bootstrap 3

As more of the consumers of information on the web turn to phones and smart devices for their browsing, it becomes ever more imperative to have a site that responds to the needs of the user. Bootstrap from Twitter is the single most effective method found on the web today for structuring a website with a mobile responsive layout.

We have been using Bootstrap 2 for some time on many of our sites, such as www.iefa.org and www.internationalstudent.com, but we are beginning the switch to Bootstrap 3 as we implement mobilization within www.internationalstudentinsurance.com — so watch for ever greater mobile responsiveness from that site as our mobile refresh continues!

Bootstrap 3 allows us to tailor the responsiveness of a website specifically for different device widths in four basic categories: extra small ( phones ), small (tablets), medium (desktops narrower than 1200px) and large (desktops greater than 1200px).  Because of this, it allows for much more fine grained manipulation than the older Bootstrap 2 family.   The grid is still set to measure 12ths of a page, so as you’re going through it, your spans or columns should always add up to 12 ( i.e.,  span6 = 6/12ths of the page, so two span6 = 12/12ths )

For example, the new International Student Insurance pages which have been updated with the responsive layouts, are a single set of pages that adapt to the device rendering them.

Responsive Desktop View
j1student-desktop-view
Responsive Mobile View
responsive view of bootstrap page on mobile device

Using the Bootstrap 3 Grid

With the old columnal grid structure, you could only specify that a page be broken into set widths – ie., this is a row with two cells, each taking up half the row, like so:

<!-- Bootstrap 2 : 50/50 split row -->
<div class="row-fluid">
	<div class="span6">
		Left Cell Tablet / Top Cell Mobile
	</div>
	<div class="span6">
		Right Cell Tablet / Bottom Cell Mobile
	</div>
</div>

When this responsive-enabled page is viewed on a mobile device, the two cells would collapse one on top of the other, rather than continuing to display as 50/50.  Due to the somewhat volatile nature of the way this could impact some more complex design elements, we have historically ended up setting a fixed viewport or container, rather than container-fluid, completely negating the value of having the responsive capable site and simply using the grid to structure the page effectively in a single format.

Bootstrap 3 changes all of that, enabling us to adjust the spacing of cells depending on the size of device viewing the page, and teaching them how to react appropriately. In addition, they have done an admirable job of using new class names for all the core elements so that if you’re absolutely required to mix and match with Bootstrap 2, you should not end up with results that are egregious due to naming conflicts.

Using the same 50/50 row from above, but converted into Bootstrap 3, it would appear as:

<!-- Bootstrap 3 : 50/50 split row -->
<div class="row">
	<div class="col-sm-6">
		Left Cell Tablet / Top Cell Mobile
	</div>
	<div class="col-sm-6">
		Right Cell Tablet / Bottom Cell Mobile
	</div>
</div>

But what if I want it to still show up as 50/50 on a mobile device?  I can change the“sm” portion of the class name to “xs” indicating that the rows should be 6/12s width at the extra small sizing, and it will keep that for all the higher widths as well, like so:

<!-- Bootstrap 3 : 50/50 split row -->
<div class="row">
	<div class="col-xs-6">
		Left Cell All Devices
	</div>
	<div class="col-xs-6">
		Right Cell All Devices
	</div>
</div>

So, why wouldn’t you just start off with the xs setting to begin with?  Well, if you’re putting a block of text into that cell, it’s going to look very odd as just 3 words per row! We can tell it to react differently on different device widths by simply including multiple classes to the cells, as follows:

<!-- Bootstrap 3: Adaptive split row -->
<div class="row">
	<div class="col-xs-6 col-sm-4 col-md-3">
		Left Cell All Devices.
		Width on Mobile: 1/2 page
		Width on Tablet: 1/3 page
		Width on Desktop: 1/4 page
	</div>
	<div class="col-xs-6 col-sm-8 col-md-9">
		Right Cell All Devices
		Width on Mobile: 1/2 page
		Width on Tablet: 2/3 page
		Width on Desktop: 3/4 page
	</div>
</div>

For a more in depth look at the Bootstrap 3 grid, please refer to their documentation on the subject.

Using the Responsive Utilities of Bootstrap 3

In addition to the major upgrade in the grid structure, Bootstrap 3 comes with a suite of classes to toggle the visibility of certain sections based on the same size divisions mentioned earlier, as well as the ability to toggle items as visible or hidden specifically for print versions.

These utilities come in two basic flavors: hidden-x and visible-x

When you specify something as hidden- you’re explicitly hiding it for that size range, but all other sizes will continue to have the default visibility.  So, hidden-xs will hide the block from the mobile device, but leave it visible to all other devices.  But what if you want to hide the block on all all devices except the large desktop? Does that mean you need to add hidden-xs hidden-sm hidden-md? That seems like a bit much … Thankfully, that’s where the visible- classes come into play. By specifying the block as visible-lg it will be visible to the desktop and hide all others. 

For an example of how this works on your current device, Bootstrap has a set of Test Cases that illustrate how the items can be used in combination with one another.

Finally, there is one more class to become familiar with in Bootstrap 3 – the “img-responsive” class. Using this class on an image will cause it to scale it’s maximum width to 100% of the width of the parent element, adjusting the height appropriately. This is very important to keep in mind if you’re making flexible cells that contain images, so that all your hard work splitting the page into a grid isn’t lost by an image that exceeds the width of the parent.  Note: it will *not* make your images larger than they are to begin with, it will simply cause them to shrink as the page is reduced in width.

There are many more features and capabilities of Bootstrap 3, but these should be enough to get your site moving forward and into the world of mobile responsiveness!

For an example of Bootstrap 3’s responsiveness in action, check out the J1 Student section of the International Student Insurance site!

UPDATE FOR BOOTSTRAP 3.2

Bootstrap 3.2 has deprecated the “visible-xs” “visible-sm” “visible-md” an “visible-lg” in favor of more specific visibility qualifiers. Please see our most recent post for the updated implementation.

This entry was posted in Technical Talk and tagged , , , . Bookmark the permalink.

Leave a Reply

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