Styling your App with Twitter Bootstrap

August 6, 2012By 11 Comments

Twitter Bootstrap is an open source toolkit to help you create visually pleasing interfaces for your web and mobile apps quickly. According to this article it’s the most watched and forked repository in GitHub. A couple of developers that work for Twitter wrote the framework (hence the name), you can follow them on twitter at (@mdo and @fat) actually wrote the framework. There’s a great article written by them explaining how and why they built the toolkit here. It’s used by a wide variety of websites and mobile apps, and there’s actually a URL dedicated to showing off some those sites built with Twitter Bootstrap here.

What is it?

The Twitter Bootstrap toolkit addresses most common scenarios for styling an app, including layout and various components. There’s a base toolkit made up of HTML5/CSS3/JavaScript, and then a set of plugins written in JavaScript that can be used to provide additional functionality including popovers, dropdowns, carousel content, modals and more. They also provide 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 to help keep file sizes at a minimum. The framework is built 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, their latest 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 a blog post, but I will highlight a bunch of the features with code snippets here to give an idea of what it entails. For a more detailed feature by feature tutorial, see this link from w3resource or the examples on the Twitter Boostrap site itself.

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 will cause the button to be 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 etc. See the code snippet below to find the specific class names used to style the buttons in the screenshot:

<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>

There are also built-in styles available for easily creating a progress bar component 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 etc). An example is shown below.

<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 make the bar striped (versus solid), and .active to then animate those stripes:

There are times where you will want to show some buttons as more of a set, or 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 below:

<div class="btn-group" style="margin: 9px 0;">
    <button class="btn">Left</button>
    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>

You can specify tabs using the .nav class along with the .nav-tabs. This next example shows how you can have not only tabs but also a tab that includes a drop-down menu with a caret icon via the .dropdown and .caret class.

<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 another set of tab classes that can be used on a div element to specify that content be .tababble and to specify which position to place the tabs (left/right). You then specify the .tab-content with multiple .tab-pane classes to specify the content of each tab. An example is shown below:

<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> 

Use the .navbar class to create a navigation bar component with content. Inside the navbar you can use the .navbar-inner class and .nav-search for displaying a search text input and aligning it left or right as shown in the example:

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <!-- brand class is from boostrap.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 -->

Use the HTML form controls with predefined classes for .btn, .checkbox, .help-block text etc. The .well class can be used to surround the content with a border box to make it stand out as shown below:

<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>

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 this list.

<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>

Twitter Bootstrap comes with various navigation styles you can use to create lists, tabs and pills for navigating between content. Use .nav and .nav-list along with .nav-header to specify header text for your list.

<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>

Use the .alert class on 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 etc. An example is shown below:

<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>

Convert your simple text into a label by specifying a .label class. To visually identify it further, 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 the screenshot below:

<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>

A badge is often used to visually indicate a count in a small icon. For instance, it’s often seen to indicate the number of email 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 above:

<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>

You can use the .thumbnail class on a div element to contain content such as an image or video clip surrounded by a nice border such as shown below:

<div class="thumbnail">
    <img src="http://placehold.it/260x180" alt="">
    <h5>Thumbnail label</h5>
    <p>Thumbnail caption right here...</p>
</div>

Twitter Bootstrap has a class called .hero-unit that is used to showcase text content. It basically creates a bordered box where you can then include what you would like to highlight such as shown below:

<div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
  </p>
</div>

Use the .table class to apply the table styles from Twitter Bootstrap. There’s also a .table-striped class that can be used to cause the rows to alternate colors 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>

Layout/Built-in Grid System

Twitter Bootstrap comes with a 12-column responsive grid system that can be used as a default or fluid layout. The default layout is a 940px centered layout, typically used for websites, where the fluid layout is based on percentages and min/max widths and is thus more flexible. The fluid layout is particularly useful when building apps for mobile. 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 chosen for that particular content (content within .span2 might be a sidebar, with content in .span10 being the body for a website for instance). So for instance, you may have a row with three .span4 classes used in a container, or a layout with 2 .span3 div’s and a .span6, an example of the markup is shown below:

<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:

<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>

To create containers with a fluid layout, you simply specify fluid on the .container and .row class used, such 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

In version 2.0 of Twitter Bootstrap media queries were added and used 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 reflow depending on available width. For instance, the predefined media queries in Twitter Bootstrap will cause the columns to stack vertically when the width is smaller than 767px. The bootstrap-responsive.css file needs to be included for the media queries to apply. You can see it by viewing their website on a mobile device vs the web. You can read more about the 2.0 version becoming responsive here.

Plugins

There are a set of plugins written in JavaScript that can also be downloaded and used with twitter bootstrap to add life to the components to do things like typeahead, popover boxes, carousels, transitions, adding toggle or event handling and more. Below are a couple of code samples and screenshots using plugins:

You can create a typeahead input control by specifying a data-provider attribute which can be used to supply set of data to be matched against when a user starts typing into a field as shown below so it can be quickly selected:

<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"]'>

A popover is often used to show an overlay with content on a tablet device. You can specify a data-content and the data-original-title attribute can be specified to control what is shown in the popover, such as below:

<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>
<script language="javascript">
        $(function ()
        { $("#example").popover();
            $("#el3").popover();
        });
        function showPopup() {
            $('#el3').popover('show')
        }
        function hidePopup() {
            $('#el3').popover('hide')
        }
</script>

For a complete list of available plugins and examples, see this link.

Useful and Related Links

Filed in: HTML/JSMobile DevelopmentUncategorized Tags:

About the Author ()

Comments (11)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Styling your UI with Twitter Bootstrap | July 25, 2013
  2. learn more | August 21, 2014
  1. Lawrence says:

    I like bootstrap but it would be nice if they added some tutorials or default elements styles for user input like comments or messages or ratings or even but hey it’s open source and free so I overall it’s pretty nice framework!

  2. Ihor says:

    Thanks! Very nice review :) .. better than their Docs :)

  3. mihau says:

    Hi Holly, could You write next post about Actionscript Workers and show some projects running from flash builder with this stuff? It’s quite important for flex community to know that Flex is alive and still going well

  4. mihau says:

    or, maybe it isn’t ?

  5. mlinden says:

    So I was running some searches looking for anything that might help me integrate twitter-bootstrap with FlashBuilder and came across your blog. Nice run down on twitter-bootstrap, but nothing on using it in FlashBuilder. Can you supply any sites or info that can help with this?

  6. Tahir Alvi says:

    Wonderful post.

    Covering whole topic of skinning.

    Thanks.

  7. John Caldman says:

    Looking for some new websites using Bootstrap I found http://www.byfuss.com. Clean and responsive.

  8. Maks Surguy says:

    Thank you for writing such great tutorials, I’m enjoying the PhoneGap write ups you publish.

    I run a collection of Bootstrap snippets that can help other developers, check it out: http://bootsnipp.com

    Enjoy!

  9. Ish says:

    Very well documented. In fact, it’s better than Twitter’s official documentation (:

Leave a Reply