Requirements

Prerequisite knowledge

A basic understanding of HTML, JavaScript, and CSS.

 

Additional required other products

Twitter Booststrap toolkit

JavaScript jQuery plugins for the Twitter Bootstrap toolkit

User level

All

Bootstrap, from Twitter, is an open-source toolkit that helps you create visually-pleasing interfaces for your web and mobile apps quickly. A couple of developers that work for Twitter wrote the framework (hence the name). According to the article, Building Twitter Bootstrap, by Mark Otto, Twitter Bootstrap is the most watched and forked repository in GitHub. Mark Otto explains how and why the developers built the toolkit. You can follow the developers on Twitter at (@mdo and @fat) actually wrote the framework. A wide variety of websites and mobile apps use this framework, and you can see some the sites built with Bootstrap, from Twitter.
 
In this article, I give you an introduction using Twitter Bootstrap and its key important features to style your apps quickly and easily.
 

 
What is Twitter Bootstrap?

Bootstrap toolkit from Twitter addresses most common scenarios for styling an application, including layout and using various components. HTML5, CSS3, and JavaScript make up the base toolkit. You also can download and use the JavaScript plugins (see link in the Requirements section) to provide additional functionality to your apps, such as including popovers, dropdown menus, carousel content, modals, and more. Bootstrap, from Twitter also provides a nifty tool you can use to customize your download to only include the support for the specific features you need rather than grabbing the whole repository, which helps you keep file sizes at a minimum. The developers built the framework on LESS, so you have that option as well when using and extending the toolkit for your own needs. If you're developing for mobile devices, the latest version of Twitter Bootstrap (version 2.0) includes support for responsive design to help you style for multiple devices by scaling across resolutions. The 12-column grid system includes options for both fixed and fluid layouts.
 
The toolkit is extensive and too much to cover in this article, but I will highlight a bunch of the features with code snippets to give you an idea of what it entails. For a more detailed feature-by-feature tutorial, see the Twitter Bootstrap Tutorial, by w3resource or the Twitter Bootstrap examples.
 

 
Base CSS examples

In this section I'll highlight some specific features from Twitter Bootstrap including a little bit of information about the feature, with a screenshot and code snippet.
 
 
Buttons
With Twitter Bootstrap you can style your HTML buttons with predefined classes to better indicate the type of action they might perform. For instance, the default .btn class makes a button appear as a light grey/white. However, you can specify the .btn-warning class to style it yellow, .btn-success for a green button, .btn-danger for red, and so forth. See the code snippet below to see the specific class names used to style the buttons in the following screenshot (Figure 1).
 
Figure 1. Screen shot showing how you can use Bootstrap to control button classes based on actions they might perform
Figure 1. Screen shot showing how you can use Bootstrap to control button classes based on actions they might perform
 
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button> <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button> <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
 
Progress bars
There are also built-in styles that you can use to create a progress bar component easily, using the .progress with a .bar class and customizing it more specifically with the .progress-xx classes where xx is the type of progress to indicate, similar to the button styles ( info , danger , success , warning, and so forth). See Figure 2 for an example.
 
Figure 2. Progress bars indicating the type of progress
Figure 2. Progress bars indicating the type of progress
 
<div class="progress progress-info" style="margin-bottom: 9px;"> <div class="bar" style="width: 20%"></div> </div> <div class="progress progress-success" style="margin-bottom: 9px;"> <div class="bar" style="width: 40%"></div> </div> <div class="progress progress-warning" style="margin-bottom: 9px;"> <div class="bar" style="width: 60%"></div> </div> <div class="progress progress-danger" style="margin-bottom: 9px;"> <div class="bar" style="width: 80%"></div> </div>
You can further customize the style of your progress bar by specifying .progress-striped to specify a striped bar (instead of a solid bar), and .active to animate the stripes, as shown in Figure 3.
 
Figure 3. Using .active to animate stripes in a progress bar
Figure 3. Using .active to animate stripes in a progress bar
 
<div class="progress progress-striped active"> <div class="bar" style="width: 40%;"></div> </div>
 
Button groups
There are times when you may want to display buttons as a set, as a composite component. You can use Twitter Bootstrap classes to achieve this effect by simply specifying a .btn-group class on a div element and then supplying the set of HTML button components within it, as shown in Figure 4.
 
 Figure 4. Displaying buttons as a set Figure 4. Displaying buttons as a set
Figure 4. Displaying buttons as a set
 
<div class="btn-group" style="margin: 9px 0;"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>
Horizontal and vertical tabs (with dropdown menus)
 
You can specify tabs using the .nav class along with the .nav-tabs class. This next example shows how you can have tabs that include a drop-down menu with a caret icon, by using the .dropdown and .caret class (Figure 5).
 
Figure 5. Creating drop-down menus within tabs
Figure 5. Creating drop-down menus within tabs
 
<ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> </ul>
There are sets of tab classes that you can use within a div element to specify tabbed content by using the .tababble class; you can also use this class to specify the position to place the tabs (left/right). You can also then specify the .tab-content class with multiple .tab-pane classes to specify the content of each tab. See Figure 6.
 
Figure 6. Customizing tabs further
Figure 6. Customizing tabs further
 
<div class="tabbable tabs-left"> <ul class="nav nav-tabs"> <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li> <li><a href="#lB" data-toggle="tab">Section 2</a></li> <li><a href="#lC" data-toggle="tab">Section 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="lA"> <p>I'm in Section A.</p> </div> <div class="tab-pane" id="lB"> <p>Howdy, I'm in Section B.</p> </div> <div class="tab-pane" id="lC"> <p>And this is Section C.</p> </div> </div> </div>
 
Navigation bar component
Use the .navbar class to create a navigation bar component with content. Inside the .navbar class you can use the .navbar-inner class and .nav-search for displaying search text input and aligning it to the left or right, as shown in Figure 7.
 
Figure 7. Customizing the navigation bar
Figure 7. Customizing the navigation bar
 
<div class="navbar"> <div class="navbar-inner"> <div class="container"> <!-- brand class is from bootstrap.css --> <a class="brand" href="#">My Brand</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action 1</a></li> <li><a href="#">Action 2</a></li> <li class="divider"></li> <li class="nav-header">Header</li> <li><a href="#">Separated action</a></li> </ul> </li> </ul> <form class="navbar-search pull-left"> <input type="text" class="search-query" placeholder="Search"> </form> </div><!-- /.nav-collapse --> </div> </div><!-- /navbar-inner --> </div><!-- /navbar -->
 
Form controls
Use the HTML form controls with predefined classes for .btn , .checkbox , .help-block text, and so forth. Use the .well class to surround the content with a border box to make it stand out as shown in Figure 8.
 
<form class="well"> <label>Label name</label> <input type="text" class="span3" placeholder="Type something…"> <span class="help-block">Example block-level help text here.</span> <label class="checkbox"> <input type="checkbox"> Check me out </label> <button type="submit" class="btn">Submit</button> </form>
Icons by Glyphicons (for buttons, navigation, and so forth)
 
Twitter Bootstrap also comes with several icon classes for embellishing your buttons and lists. An example of some of them is shown below, but for the complete list of available icons, see the Glyphicons list on the Twitter Bootstrap site.
 
Figure 9. Icons you can use through Bootstrap
Figure 9. Icons you can use through Bootstrap
 
<div class="btn-group"> <a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="icon-align-right"></i></a> <a class="btn" href="#"><i class="icon-align-justify"></i></a> </div> <p> <a class="btn" href="#"><i class="icon-refresh"></i> Refresh</a> <a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> Checkout</a> <a class="btn btn-danger" href="#"><i class="icon-trash icon-white"></i> Delete</a> </p> <div class="btn-group"> <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> <li><a href="#"><i class="icon-trash"></i> Delete</a></li> </ul> </div> </div> <p> <a class="btn" href="#"><i class="icon-refresh"></i> Refresh</a> <a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> Checkout</a> <a class="btn btn-danger" href="#"><i class="icon-trash icon-white"></i> Delete</a> </p> <p> <a class="btn btn-large" href="#"><i class="icon-comment"></i> Comment</a> <a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a> <a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> More Info</a> </p>
 
Navigation list
Twitter Bootstrap comes with various navigation styles you can use to create lists, tabs and pills for navigating between content. Use the .nav and .nav-list classes along with the .nav-header class to specify header text for your list.
 
Figure 10. Specifying navigation styles
Figure 10. Specifying navigation styles
 
<ul class="nav nav-list"> <li class="nav-header"> List header </li> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">Library</a> </li> ... </ul>
 
Alerts
Use the .alert class within a div element for creating alert boxes. For alerts requiring more than one line of text, further qualify it with the .alert-block class. To style it with a visual indicator of the type of alert, add the .alert-xx class where xx is again similar to the button and progress-bar style classes of info, warning, danger, and so forth. See figure 11.
 
Figure 11. Customizing alerts
Figure 11. Customizing alerts
 
<div class="alert alert-block alert-error"> <a class="close" data-dismiss="alert" href="#">X</a> <h4 class="alert-heading">Error!</h4> Please try again... </div> <div class="alert alert-block alert-success"> <a class="close" data-dismiss="alert" href="#">X</a> <h4 class="alert-heading">Success!</h4> Congratulations, you have successfully submitted. </div> <div class="alert alert-block alert-info"> <a class="close" data-dismiss="alert" href="#">X</a> <h4 class="alert-heading">Info</h4> This is some informational text... </div>
 
Labels
Convert your simple text into a label by specifying a .label class. To identify it visually, qualify it with the .label-xx classes where xx can have a value of success , warning , important , info, and inverse with the resulting colors of each shown in Figure 12.
 
Figure 12. Customizing labels
 
<span class="label">Default</span> <span class="label label-success">Success</span> <span class="label label-warning">Warning</span> <span class="label label-important">Important</span> <span class="label label-info">Info</span> <span class="label label-inverse">Inverse</span>
 
Badges
Often, a badge visually indicates a count in a small icon, for instance, badges often indicate the number of e-mail items unopened in your mailbox, or the amount of updates an app has outstanding. You can use Twitter Bootstrap to create a badge quickly using the .badge class and again further qualify it with a .badge-xx class to indicate a particular color, similar to the labels shown in Figure 12.
 
Figure 13. Indicating badge colors
Figure 13. Indicating badge colors
 
<span class="badge">1</span> <span class="badge badge-success">2</span> <span class="badge badge-warning">4</span> <span class="badge badge-important">6</span> <span class="badge badge-info">8</span> <span class="badge badge-inverse">10</span>
 
Thumbnails
You can use the .thumbnail class within a div element to contain content such as an image or video clip surrounded by a nice border, as shown in Figure 14.
 
Figure 14. Surrounding an image or video clip with a border
Figure 14. Surrounding an image or video clip with a border
 
<div class="thumbnail"> <img src="http://placehold.it/260x180" alt=""> <h5>Thumbnail label</h5> <p>Thumbnail caption right here...</p> </div>
 
Typography
Twitter Bootstrap has a class called .hero-unit that you can use to showcase text content. This class basically creates a bordered box where you can include content that you would like to highlight, as shown in Figure 15.
 
Figure 15. Showcasing content
 
<div class="hero-unit"> <h1>Heading</h1> <p>Tagline</p> <p> <a class="btn btn-primary btn-large"> Learn more </a> </p> </div>
 
Tables
Use the .table class to apply the table styles from Twitter Bootstrap. You can also use the .table-striped class to alternate colors for rows, for readability (Figure 16).
 
Figure 3. Using .active to animate stripes in a progress bar
 
Figure 16. Alternating the colors of rows for readability
 
<div class="span8"> <table class="table table-striped"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div>

 
Using the layout and built-in grid system

Twitter Bootstrap comes with a 12-column responsive grid system that you can use as a default or fluid layout. The default layout is a 940 pixel-centered layout, typically used for websites where percentages and min/max widths define the fluid layout, which is thus, more flexible. Fluid layouts are particularly useful when building apps for mobile devices. You use the grid system by setting up div elements that specify predefined .row and .span classes for rows and columns respectively. The spans need to add up to 12 and your content will flow according to the .span class that you have chosen for that particular content. (For instance, content within .span2 class might be a sidebar, where content in a .span10 class might be the body for a website). So let's say you have a row with three .span4 classes in a container, or a layout with two .span3 div tags and a .span6 class, an example of the markup would look like the following code:
 
<div class="container"> <div class="row"> <div class="span4"> <!--content--> </div> <div class="span4"> <!--content--> </div> <div class="span4"> <!--content--> </div> </div> </div>
Here's another example of some markup with a screenshot to illustrate (Figure 17):
 
<div class="container"> <div class="row"> <div class="span4"> <h2>Column 1</h2> <p>Morbi fringilla, arcu et pharetra ornare, arcu dolor tincidunt erat, non ornare nisl diam vitae orci. Nulla eu eros non ligula luctus aliquet. Morbi tempus laoreet urna, nec aliquam odio dapibus at. Nam in libero ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et libero eu tortor eleifend vestibulum. Aenean molestie velit sed lectus placerat malesuada. </p> <p><a class="btn btn-inverse btn-large" href="#">Go</a></p> </div> <div class="span4"> <h2>Column 2</h2> <p>Sed nec iaculis elit. Donec gravida risus ante, quis semper sem. Pellentesque sapien eros, sollicitudin hendrerit tincidunt eu, elementum ut velit. Vivamus ultricies suscipit mauris, at accumsan urna pellentesque non. Integer mollis justo non urna commodo ut tincidunt arcu venenatis. Nullam in libero id tellus posuere sollicitudin. Vestibulum eu dictum purus. Fusce dignissim facilisis pellentesque. Duis at risus eget magna mattis venenatis et non mi. </p> <p><a class="btn btn-info btn-large" href="#">Info</a></p> </div> <div class="span4"> <h2>Column 3</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dignissim facilisis pellentesque. Duis at risus eget magna mattis venenatis et non mi.</p> <p><a class="btn btn-success btn-large" href="#">Read More...</a></p> </div> </div> </div>
Figure 17. Using the fluid grid layout
 
To create containers with a fluid layout, you simply specify fluid within the container and row class, as follows:
 
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> </div> <div class="span10"> <!--Body content--> </div> </div> </div>

 
Responsive design

Version 2.0 of Twitter Bootstrap contained media queries that you could use to check screen widths and modify components for a better fit and layout depending on space available. It basically causes the default column sizes to change and the content to re-flow depending on available width. For instance, the predefined media queries in Twitter Bootstrap specifies that the columns stack vertically when the width is smaller than 767 pixels. Simply include the bootstrap-responsive.css file for the media queries to apply. You can see this responsive design by viewing your website on a mobile device rather than through a web browser on your computer. Read more about responsive design in the article, Twitter Bootstrap 2: Bootstrap Goes Responsive.
 

 
Plugins

There are a set of JavaScript plugins that you can download and use with Twitter Bootstrap to add life to the components, to do things like type ahead functionality, popover boxes, carousels, transitions, adding toggles, or event handling, and more. Below are a couple of code samples and screenshots using plugins.
 
 
Typeahead example
You can create a typeahead input control by specifying a data-provider attribute, which you can used to supply a set of data to be matched against when a user starts typing into a field. See Figure 18 below; as a user starts typing, data that might match the keystrokes appears so the user can quickly select it.
 
Figure 18. Using a typeahead input control to help your user save time filling out form fields
 
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Apples","Bananas","Cherries","Dates","Eggplants","Figs","Grapes", "Honeydew","Kiwi","Mango","Peaches","Plums","Raspberries","Strawberries","Watermelon","Zucchini"]'>
 
Popover example
You can use popovers to show an overlay (of information) with content on a tablet device. You can specify data-content and the data-original-title attributes to control what appears in the popover (Figure 19).
 
Figure 19. Adding popover content to your app
Figure 19. Adding popover content to your app
 
<a href="#" class="btn btn-info" rel="popover" id='el3' data-content="This is my popover content" data-original-title="My Popover Title">hover for popover</a>
Here is the JavaScript that you use to create the Popover overlay:
 
<a href="#" class="btn btn-info" rel="popover" id='el3' data-content="This is my popover content" data-original-title="My Popover Title">hover for popover</a>
For a complete list of available plugins and examples, see JavaScript for Bootstrap (jQuery plugins) on the Twitter Bootstrap site.
 

 
Where to go from here

In summary, take a moment to try out Twitter Bootstrap with your next application or website design. With the responsive layout in the latest version and the useful grid system, it can be an invaluable resource you can use to make your application to look professional fast. If you're looking for more information and complements to Twitter Bootstrap, see the highlighted resources below: