June 2015
Volume 30 Number 6
Web Development - Building Responsive Web Sites with Bootstrap
By Keith Pijanowski | June 2015
It’s only a matter of time before a customer taps your site’s URL on their mobile device. Will the user see a rendering of your site that’s impossible to use on a phone because the site was designed for desktop only? If so, that user will most likely move on to a more mobile-friendly site. What if that user could instead encounter a UX designed specifically for a mobile form factor, and enjoy easily interacting with your site?
In the past, a Web site that supported mobile and desktop required different code bases. Today, however, there are UI frameworks that allow a site’s Web pages to support mobile, tablet, desktop and even large-screen desktops—all with a single code base. Though these tools aren’t a panacea for mobile Web developers, they can significantly ease the development process. Still, thought must be given to determine if one is right for your site.
This article presents an overview of one of these tools, Bootstrap, which is included in many of the Visual Studio 2013 Web Application templates. Bootstrap is a framework that enables responsive Web design (RWD)—an approach to designing Web sites that aims to provide an acceptable viewing experience across all form factors with a single code base. After the overview, I’ll consider some factors that can help you decide if a framework like Bootstrap is right for your site.
The Beginning
It has taken a certain amount of evolution to bring the software industry to the point where a solution like Bootstrap emerges. After a fitful start, beginning in 1998, in which Wireless Markup Language (WML), Compact HTML, and XHTML Mobile Profile surfaced and then disappeared, HTML5 finally became the next-generation HTML standard for all devices in 2009. But standards alone aren’t enough. While the standard for mobile Web markup was evolving, significant advances also occurred with hardware, mobile browsers and bandwidth. Processors became faster, mobile browsers advanced to the point where they could display any Web page (even if the page hadn’t been designed for a mobile device), and bandwidth increased. This created an environment for developers to take over.
Developers love to make tools for other developers, and the mobile Web is no exception. There are more than a dozen different UI frameworks on the market today. It would be unfair to label one of these frameworks “the best” because there are different approaches and Web sites have different requirements. I chose Bootstrap for this article because it has a solid level of adoption, is fully documented, and is included in the ASP.NET Web Application templates.
What Is Bootstrap?
Bootstrap is a responsive UI framework for building Web sites. The Bootstrap framework, like many other UI frameworks for Web development, is a collection of CSS classes, UI components and JQuery plug-ins. Bootstrap is considered a lightweight framework. In other words, it uses CSS more than JavaScript to do its work. Even though Bootstrap is considered lightweight, a Web page that uses Bootstrap tooling still requires more processing to render than a page written specifically for a given form factor. For this reason, performance should be an important consideration when designing, developing and testing pages that use any part of the Bootstrap framework.
Bootstrap does a lot for you automatically. It also allows you to easily customize the default behavior for a specific form factor while keeping your page looking good on other form factors. Version 3 of Bootstrap comes with CSS classes that specifically target browser widths commonly found on mobile browsers, tablet browsers, desktop browsers and even browsers running on large desktop screens. You can use the Bootstrap CSS classes to annotate HTML5 elements. The most commonly used CSS classes involve the Bootstrap grid system, a collection of classes that organize the layout of a page using rows and columns. I’ll describe the grid system in more detail later in this article.
Bootstrap has a number of UI components for creating a site’s UI, including Button dropdown, Button group, Dropdown, Navbar, Breadcrumb, Media object, Pagination and Progress bar, just to name a few. Many of these components are responsive themselves, meaning that they render differently based on the width of the browser. For example, the Navbar is a powerful component that transitions automatically from a menu bar that displays menu options across the entire width of the screen on desktops to a nice-looking compact version that presents options via a dropdown menu bar that’s activated when the user touches the Navbar.
For more advanced UI features, Bootstrap also has a collection of custom JQuery plug-ins, including Carousel, Collapsible panel, Modal dialog prompts and Popover messages.
Getting Started
The Bootstrap CSS and JavaScript files are automatically included in your project when you use the ASP.NET Web Application template for Visual Studio 2013 to create your project. The new project dialog for Web Application templates is shown in Figure 1. Bootstrap also requires JQuery. When you get Bootstrap from the Visual Studio 2013 Web Application template, you get Bootstrap v3.0.0 with JQuery v1.10.2. If you use the templates for Visual Studio 2012, these files won’t be included in your project. Also, Bootstrap is not included automatically if you create a new Web site using File | New Web Site.
.png "Visual Studio 2013 New Project Dialog for the ASP.NET Web Application Template")
Figure 1 Visual Studio 2013 New Project Dialog for the ASP.NET Web Application Template
If you prefer to use the latest and greatest versions of Bootstrap and JQuery, use NuGet to update your project. And use NuGet to get Bootstrap if you have a version of Visual Studio prior to Visual Studio 2013. The Bootstrap site (getbootstrap.com) shows how to link to a CDN-hosted version of Bootstrap, which can provide a significant performance advantage.
Experimenting with the Bootstrap Grid System
Bootstrap provides what’s known as a 12-column responsive layout. You can lay out your pages using any number of rows, but you must use 12 columns. These 12 columns are sized equally across the width of the browser and you use the Bootstrap CSS classes to specify how many columns an HTML element should occupy. This is a different type of grid system than XAML developers for Windows Phone and Windows 8 are accustomed to. The XAML grid system allows a page layout to have any number of rows and columns. Developers then place each control in a cell by specifying a row number and a column number. What makes the Bootstrap grid system especially powerful is that you can specify a different column span for large desktops, normal desktops, tablets and phones. For example, a common layout pattern is to create a series of divs and for each div specify that it should occupy 2 columns on a large desktop (this means that 6 divs would fit on each row), 3 columns on a normal desktop, 4 columns on a tablet and 6 columns on a phone (which would produce 2 divs per row). This scenario is coded in Figure 2 using the col* classes that make up the Bootstrap grid system. The color classes (gray, orange and so on) merely color the background of a div. Figure 3 and Figure 4 show how this page would be rendered on a desktop and a phone, respectively.
Figure 2 A Common Layout Pattern Using the Bootstrap Grid System
<body>
<div class="container">
<hr />
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">1</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">2</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">3</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">4</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">5</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">6</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">7</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">8</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">9</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">10</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">11</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">12</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">13</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">14</div>
</div> <!-- /container -->
</body>
.png "The Example from Figure 2 Rendered on a Desktop Using the col-md-3 Class")
Figure 3 The Example from Figure 2 Rendered on a Desktop Using the col-md-3 Class
.png "The Example from Figure 2 Rendered on a Phone Using the col-xs-6 Class")
Figure 4 The Example from Figure 2 Rendered on a Phone Using the col-xs-6 Class
It’s important to note that Bootstrap doesn’t actually detect the device type. Rather, Bootstrap uses media queries to determine whether a CSS class should be applied. The four categories of classes are shown in Figure 5, along with the width ranges that will cause each category to be applied.
Figure 5 Bootstrap Grid System Class Categories
| Category Prefix | Form Factor | Width in Pixels |
| col-xs-* | Phone | Less than 768 |
| col-sm-* | Tablet | 768 to 991 |
| col-md-* | Desktop | 992 to 1,200 |
| col-lg-* | Large Desktop | Greater than 1,200 |
You can use any combination of these categories when laying out a specific HTML element. For example, the following line of code uses one class from each category:
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> {Other HTML elements here.} </div>
This is equivalent to the following pseudo code:
If the browser’s width is less than 768 pixels, then this div will span 6 of 12 available columns, which takes up one-half (6/12) of the screen.
Else if the browser’s width is between 768 pixels and 991 pixels, then this div will span 4 of 12 available columns, taking up one-third (4/12) of the screen.
Else if the browser’s width is between 992 pixels and 1,200 pixels, then this div will span 3 of 12 available columns, taking up one- fourth (3/12) of the screen.
Else if the browser’s width is greater than 1,200 pixels, then this div will span 2 of 12 available columns, taking up one-sixth (2/12) of the screen.
You don’t have to explicitly specify a column count for each category. If you don’t specify a particular category, the next category down in size will be used. For example, if you’d like a unique layout for phones but it’s OK for tablets, desktops and large desktops to have the same layout, you just need to specify a class for phone and tablet. like so:
<div class="col-xs-6 col-sm-4"> {HTML elements here.} </div>
Bootstrap will use the tablet setting for both the desktop and large desktop form factors. Also, the default class for phone is col-xs-12, which places each div on its own row. If this is an acceptable layout for a phone, the preceding line of code can be further reduced:
<div class="col-sm-4"> {HTML elements here.} </div>
Notice in Figure 2 that rows aren’t specified. The Bootstrap grid system will automatically move a div to the next row if the current row has already been used up or if there’s not enough room for the div. You can force a new row by using the row class like this:
<div class="row">
{Place columns here.}
</div>
Why 12 columns? 12 may sound like a randomly chosen number for this grid system, but it’s not. The number 12 provides a lot of divisibility and a lot of room for composability. For example, the numbers 1, 2, 3, 4, 6 and 12 all divide evenly into 12. Using these values for column spans can produce a content layout of 12 columns, 6 columns, 4 columns, 2 columns and 1 column, respectively. Moreover, combinations such as 3+9, 9+3, 4+8 and 8+4 are visually appealing combinations for laying out content.
Bootstrap Components
Bootstrap contains more than 20 components, which can be used in their current state or easily extended. Check out the Bootstrap site for a description of each component and a usage example. The documentation for the media object even makes use of an REO Speedwagon music video to demonstrate its use. Even if you didn’t grow up during the 80s, consider giving it a listen.
I’ll take a closer look at the Navbar component, which is used to create a menu bar at the top of a page. Figure 6 shows how to use the Navbar component to create a simple menu that contains a site’s brand and a few menu options. When a browser’s width is wider than 768 pixels, the Navbar is rendered as shown in Figure 7. If the browser width is smaller than 768 pixels, the Navbar is rendered as shown in Figure 8. In this case, the menu options are displayed when the user taps the button containing the horizontal lines.
Figure 6 Using the Bootstrap Navbar Component
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link 1
<span class="sr-only">(current)</span></a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
.png "The Navbar Rendered for Browser Widths Equal to or Greater Than 768 Pixels")
Figure 7 The Navbar Rendered for Browser Widths Equal to or Greater Than 768 Pixels
.png "The Navbar Rendered for Browser Widths Less Than 768 Pixels")
Figure 8 The Navbar Rendered for Browser Widths Less Than 768 Pixels
Obviously, this is a very simple example. The Navbar can also contain dropdown menu buttons, and you can even incorporate search functionality in the Navbar. Also, the Brand portion of the Navbar, which is text in the example, can be an image.
JQuery Plug-Ins
Bootstrap has about a dozen JQuery plug-ins, which are documented under the JavaScript tab at the Bootstrap site. At first glance they look similar in function to the components described in the previous section in that they’re CSS classes that are used to augment HTML5 elements. However, these CSS classes trigger JQuery activity when the HTML element is rendered or when various events fire off the HTML element. Pages that make heavy use of these plug-ins should be tested for performance issues, especially on devices with slower CPUs and limited memory.
The JavaScript needed to run these plug-ins is located in bootstrap.js. Each plug-in is also available as a standalone file, which enables you to include only the plug-ins your app needs, resulting in faster first-page rendering.
Figure 9 shows how to use the Carousel plug-in, which provides slideshow functionality. If your page already has a link to bootstrap.js or bootstrap.min.js, you’re all set. Or you can link to carousel.js if the Carousel plug-in is the only plug-in your page requires.
Figure 9 Using the Carousel Plug-In
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slide content -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
... Only one slide for brevity.
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Figure 10 shows the Carousel plug-in rendered for Windows Phone. The Carousel plug-in stretches itself appropriately for tablet, desktop and large desktop form factors.
.png "The Carousel Example Rendered in the Windows Phone Emulator")
Figure 10 The Carousel Example Rendered in the Windows Phone Emulator
Considerations
As I noted earlier, Bootstrap won’t be right for every situation. To determine if Bootstrap is right for your site, there are a few things you’ll want to consider:
- If you have an existing site that has been performance-tuned over the years and has been optimized for your users, you’ll want to proceed with caution. Prototyping complex, highly used pages is also a good idea. If a Bootstrap-enabled page doesn’t perform adequately, consider setting up an m-site and coding everything yourself. Dino Esposito’s article, “Mobilize an Existing Web Site” (bit.ly/1CaVEWR), shows how to set up an m-site.
- If you’re building a new site, prototype your most complex pages and the pages you believe will be most heavily used. Make sure they work well on low-end devices and in areas of low bandwidth. If a page proves to be problematic then try to redesign it such that it will perform adequately. An m-site is also an option for new sites, but this should be done only if a redesign will not work.
- Make sure that the Bootstrap grid system and the components used for navigation aren’t too limiting with respect to site design. Check with your UX designers early in the process of investigating Bootstrap. In my opinion, a tool like Bootstrap forces you to design for mobile, which forces you to keep your pages clean and uncluttered. However, your UX designer can confirm whether Bootstrap can be made to properly represent your brand and provide an experience suitable for your users.
More Information and Tools
If you’re going to develop your site using Bootstrap, you’ll want to review all the components and JQuery plug-ins documented on the Bootstrap site, where you’ll also find many useful examples. You should also check out:
- Bootswatch (bootswatch.com) contains free themes for Bootstrap.
- Wrap Bootstrap (wrapbootstrap.com) contains inexpensive Bootstrap themes and templates.
- Font Awesome (fontawesome.io) is a site that provides free scalable vector icons that can be easily customized with CSS.
- “Deploy an ASP.NET MVC 5 Mobile Web Application on Azure Websites” (bit.ly/1CMOGwq) shows how to apply Bootstrap to an existing Web site to make it mobile-friendly. The article also shows how to deploy a site to Microsoft Azure.
Wrapping Up
The material presented here is just a brief overview of the Bootstrap UI framework. It by no means completely describes all the CSS classes, components and plug-ins that come with Bootstrap. You’ll want to go to the Bootstrap site to get a complete understanding of all the tools available, and to explore the sample pages that demonstrate different UX designs. These samples are a good place to start if you need to get a feel for what’s possible with Bootstrap.
Before moving forward with a serious development effort using Bootstrap or any other framework, do consider performance and usability. Prototyping key pages is the best way to confirm that Bootstrap can be incorporated into your site and give you the results you want.
Keith Pijanowski is an engineer, entrepreneur and business guy. He has more than 20 years of experience in the software industry and has worked for startups and large companies in roles that range from writing code to business development. Reach him at keithpij@msn.com or twitter.com/keithpij.
Thanks to the following Microsoft technical experts for reviewing this article: Rick Anderson and Cephas Lin