Stepping Out With Bootstrap from Twitter

Twitter introduced Bootstrap recently, a library of CSS styles aimed at web app developers in need of some design help. The toolkit includes everything from grid layouts down to buttons and modals, and works on pretty much all modern browsers, all the way back to IE7.

Let’s see what we can do with it…

Bootstrap is also enhanced through the Less preprocessor, which adds some additional reasons to use Bootstrap, although we’ll exclude the Less functionality from the scope of this tutorial, to keep thing simple.

Bootstrap includes a bit of documentation, but nowhere does it really explain how to use the toolkit (instead, there’s just one big demo page for you to investigate yourself). So, in this article, we’re going to strip down Bootstrap’s example page and analyze how to replicate the elements that Bootstrap covers. In providing examples, we’ll also build up a sample webpage made entirely with Bootstrap.

What’s Covered?

We’re going to take a look at the following (use the links to skip to the various sections):

• The Grid System
• Typography
• Tables
• Forms and Buttons
• Navigation
• Tabs and Pills
• Pagination
• Alerts and Error Messages
• Modals

The Grid System

Grids are an integral part of a lot of web designs. Just as a city planner designs on a grid, a web designer can also align his elements in such a way. Bootstrap includes a grid system that totals 940px in width, encased inside the container class. There are sixteen different column classes all together, with the width of each one cumulatively adding 60px as the number increases, starting at 40px. For example, the span1 class has a width of 40px, whereas the span3 class has a width of 160px.

As demonstrated in the image above, we can use a combination of different classes to create a total width equalling 940px, including the 20px margin added to each one. For example, the use of four div.span4 classes would, translated, mean 220+20+220+20+220+20+220 which, once we whip out the calculator, equals a full 940 pixels. By wrapping all these in a row class, Bootstrap accounts for the twenty-pixel margin on the last column by moving the whole thing twenty-pixels back.

	<div class="row">
		<div class="span6">
			<h1>Column #1</h1>
			<p>Content for column #1.</p>
		</div>
		<div class="span5">
			<h1>Column #2</h1>
			<p>Content for column #2.</p>
		</div>
		<div class="span5">
			<h1>Column #3</h1>
			<p>Content for column #3.</p>
		</div>
	</div>

The above code will generate a fairly equal set of CSS columns displaying some minimal content. Naturally, we can just swap around some of these classes or add/subtract tags to create different layouts. Another feature of the Bootstrap toolkit is the ability to “skip” a column by offsetting it. The offset classes are, again, numbered 1-16 where their widths follow the same +60 pattern, although they now include an additional 40px to compensate for the left and right margin of said column. For example, we can take the above example, but remove the middle column by adding the offset5 class to the end tag. For example:

	<div class="row">
		<div class="span6">
			<h1>Column #1</h1>
			<p>Content for column #1.</p>
		</div>
		<div class="span5 offset5">
			<h1>Column #3</h1>
			<p>Content for column #3.</p>
		</div>
	</div>

It’s pretty simple to manipulate this with only a few numbers needing to be changed, and the image at the start of this section should be used as a guide for some recommended structures.

Typography

One of the things that runs through pretty much all of the elements shown in this tutorial is typography. Bootstrap comes with all the typography tags you’d want styled for, everything from an <address> tag to <h1> and the whole heading hierarchy. Honestly, this is “Web Development 101″ stuff that you probably already know, so I won’t waste your time explaining how to style. It’s pretty elemental stuff.

It is important to note that Bootstrap does account for older, now-deprecated tags, so you shouldn’t worry there if you’re using a CMS that uses them, or for a client who doesn’t know any alternative.

Quoting

Where Bootstrap does need a little more explaining is when you come to use the <blockquote> tag. You can use the tag on its own to show the quote indented, with a thick grey border on the left. However, it can be enhanced by nesting other tags inside to attribute the quote. When it comes to adding an attribute, simply wrap your quote text in a <p> tag, and the source in a <small> tag and Bootstrap will automatically style and put a dash in front of the source.

<blockquote>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
	<small>Connor Turnbull, August 30th</small>
</blockquote>

You’ll end up with a result similar to the image below, depending on what content you put in between the paragraph and small tags.

Lists

Lists are another bit of the typography spectrum that is covered in Bootstrap, and comes with four different sets of styles: bulleted lists, nested bulleted lists, ordered lists and glossaries. Again, these are not that hard to use as they don’t deviate from what’s standard in HTML. Because lists can be constructed in different ways, here’s a quick recap of how to use them with the Bootstrap styles.

The code below is a basic unordered, bulleted list that will produce something similar to the first example in the image below. Swap out the ul for an ol to produce an ordered list, like that in the second example.

<ul>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	...
</ul>

If you add the unstyled class to the unordered list, un-nested list items will not be bulleted, or ordered. They’ll just appear like regular lines, whereas nested items will have a bullet to the left.

<ul class="unstyled">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	...
</ul>

Adding a description list is done in the same way as you’d expect outside of Bootstrap, and results in a sample like the last one in the above image.

<dl>
	<dt>Lorem ipsum</dt>
	<dd>Lorem ipsum dolor sit amet</dd>
	<dt>Consectetur</dt>
	<dd>Consectetur adipiscing elit</dd>
	...
</dl>

Tables

Bootstrap is a toolkit that’s aimed partly at new web designers, so it doesn’t necessarily go without saying that these things are not meant for layouts. Instead tables are meant for tabular data, and Bootstrap does a pretty good job at beautifying your tabular data with its styles, without needing any additional classes or attributes. For example, we can take a look at a regular snippet of HTML that would generate a table.

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Some</td>
            <td>One</td>
            <td>English</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Stu</td>
            <td>Dent</td>
            <td>Code</td>
        </tr>
    </tbody>
</table>

The code above creates the table in the image below, as used in Twitter’s official example. It has three content rows and a header in four columns, and is pretty standard. With little manipulation (scratch that, no manipulation) to the standard creation of a table, Bootstrap automatically applies its styles.

In this case, the paramount thing to remember is to correctly nest your tags. The styles do not apply if you don’t wrap your heading row in a <thead> tag, for example.

By default, the table is not zebra-striped, where alternate colors could fill the background of each row. This is easy to enable, however, simply by adding the zebra-striped class to the <table> tag without any manipulation of the rows or individual parts.

<table class="zebra-striped">
    <thead>
        <tr>
            <th>#</th>
            ...

Finally, with the addition of a small piece of jQuery, but no change to the HTML apart from adding sortTableExample as the ID of the <table> tag, you can add sorting functionality when the heading of a column is clicked upon. This functionality requires the Tablesorter 2.0 jQuery plugin, downloadable for free. As you’ve probably already guessed, you’ll also need to call jQuery for this to work.

<strong><script src="http://d3pr5r64n04s3o.cloudfront.net/tuts/195_bootstrap/tut/path/to/tablesorter/jquery.tablesorter.min.js"></script>
<script>
  $(function() {
    $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
  });
</script></strong>
<table class="zebra-striped" id="sortTableExample">
    <thead>
        <tr>
            <th>#</th>
  ...

Forms and Buttons

Most of the stuff we’ve already covered is pretty simple, where Bootstrap will apply styles to your code with little or no change from normal. Getting that out of the way, we can now move onto some stuff that requires a little more explaining and a bit more tutoring.

Forms

For forms, there are plenty of different styles you can use, so we’re going to look at each one individually. You can then just use these in combination with each other, and manipulate them with preexisting knowledge of regular old HTML forms.

Firstly, it should be noted that your entire form should be wrapped in a <form> tag, but you probably know that already. Bootstrap also recommends you wrap your elements in <fieldset> tags, with an additional <legend> tag.

<form>
    <fieldset>
        <legend>Lorem ipsum dolor sit amet</legend>
        <em>(your fields go here)</em>
    </fieldset>
</form>

Generally, your form setup shouldn’t differ from the code above. The only other option that Bootstrap provides is to opt for stacked forms, where labels reside to the top of a field, rather than to the left. That can be achieved by adding the form-stacked class to the <form> tag.

<form class="form-stacked">

Text Input

To kick off our coverage of form fields, we’ll look at a regular input field with a label. The code snippet below is essentially a <label> and an <input> tag, wrapped in a <div> tag with the clearfix class to ensure correct spacing. Additionally, the actual field is wrapped in another <div> with the input class, again, to ensure correct spacing.

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input">
        <input type="text" />
    </div>
</div>

For this tutorial’s sake, i’m going to ignore a few practices that should be employed in your code. For example, each input should have an ID, which is bound to the label through “for” attribute, and you’ll generally want to name your input fields to grab them when it comes to processing your data. We’re looking specifically at how to use Bootstrap’s styles here, so those types of attributes haven’t been included in my examples to try and keep things as simple as possible. Nevertheless, even though they are being used in conjunction with Bootstrap, those tasks should not be forgotten.

By adding the xlarge class to the <input>, the form field is widened.

We can disable an input in the regular way, by adding the appropriate attributes, as demonstrated in the example below. Bootstrap’s styles are added in the disabled class, which should be added to visually show that a user cannot interact with that field by graying it out.

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input">
        <input class="xlarge disabled" type="text" placeholder="Lorem ipsum dolor sit amet" disabled />
    </div>
</div>

While the grayed out approach of a disabled field is achieved by using an <input> tag, an uneditable one is not. Instead, Bootstrap uses a simple <span> that can be used in conjunction with a hidden input. These fields are used for information which the user shouldn’t edit, such as an automatically collected date or IP address.

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input">
        <span class="uneditable-input">Lorem ipsum dolor sit amet</span>
        <input type="hidden" value="Lorem ipsum dolor sit amet" />
    </div>
</div>

Our final look at styling text inputs is to show contextual help when an error is encountered. It is done by adding an error class to the <div> that forms the clearfix, and to the <input> tag itself. Adding a <span> tag with the help-inline class underneath adds the help message on the right side.

<div class="clearfix error">
    <label>Lorem ipsum</label>
    <div class="input">
        <input class="error" type="text" />
        <span class="help-inline">Dolor sit amet</span>
    </div>
</div>

Dropdown Select

A dropdown menu is structured in a similar way, with the regular code being employed, as shown below.

<div class="clearfix">
    <label>Lorem Ipsum</label>
    <div class="input">
        <select>
            <option>Lorem</option>
            <option>Ipsum</option>
            <option>Dolor</option>
            <option>Sit</option>
            <option>Amet</option>
        </select>
    </div>
</div>

The xlarge class to a text field is the opposite of the medium class to a <select> tag. Adding such a class to the dropdown menu of options will actually make the field narrower.

Checkboxes

Checkboxes aren’t really styled in Bootstrap. The toolkit just arranges them to sit in line with the other fields, and does so by creating a list with each checkbox item. The code is pretty self-explanatory, just be sure to wrap both the label text and the checkbox in the <label> tag so that (a) the checkbox is floated to the left and (b) the checkbox can be selected by clicking on the label.

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input">
        <ul class="inputs-list">
            <li>
                <label>
                    <input type="checkbox" />
                    <span>Lorem ipsum dolor sit amet</span>
                </label>
            </li>
         </ul>
    </div>
</div>

That code will generate a single checkbox with a label to the right. To create an additional one, just repeat the list item and its contents, then voilà, you have list of checkboxes.

To disable a checkbox, simply add the disabled attribute to the <input> tag, and the disabled class to the <label> tag.

<li>
    <label class="disabled">
        <input type="checkbox" disabled />
        <span>Lorem ipsum dolor sit amet</span>
    </label>
</li>

Additionally, there are two extra types of checkboxes which are paired with text fields: prepended and appended checkboxes. Again, this is fairly self-explanatory and is very similar to a regular text field. However, this time round you need to wrap the checkbox in a <label> tag (with the add-on class), and either the input-prepend or the input-append class to parent <div>. Then, all that’s left is to make sure you put the label and the field the right way round, depending on whether you want it prepended or appended.

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input input-append">
        <input type="text" />
        <label class="add-on"><input type="checkbox" /></label>
    </div>
</div>

The above code is for an appended checkbox, but, if you wanted a prepended one, there’s little to change.

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input input-prepend">
        <label class="add-on"><input type="checkbox" /></label>
        <input type="text" />
    </div>
</div>

File Inputs

File inputs are very much like text fields and the code below is pretty self explanatory. Create a regular file input with the input-file class.

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input">
        <input type="file" class="input-file" />
    </div>
</div>

Text Areas

The final Bootstrap style for forms is the text area. The text area is created in the same way as the single line text field. Like enlarging a text field, the text area also has its own class to make it wider, xxlarge.

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input">
        <textarea></textarea>
    </div>
</div>

Optionally, you can add a small help line below the field with the following line added immediately after the <textarea> tag.

<span class="help-block">Lorem ipsum dolor sit amet</span>

Buttons

Now it’s time to process our form, and normally we do so by clicking a button. Fortunately, Bootstrap covers buttons and they’re super simple to add.

Buttons can be added through either an <a> or a <button> tag. Both share the same classes and will look identical, but you should try and reserve buttons for actions, and links for, well, links. So, for example, a button would be written as so:

<button class="btn">Lorem ipsum</button>

And an idential button, but created as a link, would be written as so:

<a href="#" class="btn">Lorem ipsum</a>

By default, the button will appear in a light gray style. However, this can easily be changed to one of the four others (light blue, blue, green and red) by applying an additional class.

• primary for a blue button that is the primary action (e.g. submitting a form)
• info for a lighter blue button, usually used to access information
• success for a green button, used to signal success
• danger for a red button, usually used for irreversible or dangerous actions such as deleting

<button class="btn primary">Primary</button>
<button class="btn">Default</button>
<button class="btn info">Info</button>
<button class="btn success">Success</button>
<button class="btn danger">Danger</button>

We can also change the size of a button from the default. To enlarge it, simply add the large class or shrink it with the (yep, you guessed it) small class.

Finally, to disable a button, all we need to do is add the disabled class and, in the case of an action button, set the disabled attribute.

<button class="btn disabled" disabled>Lorem ipsum</button>

or

<a class="btn disabled">Lorem ipsum</a>

Navigation

Bootstrap includes a fixed navigation bar that resembles the one on Twitter’s website. The bar is essentially made up of three sections, the title link, the menu items in the search bar, encased in a couple of <div> tags that aren’t worthwhile explaining.

In the code below, you’ll notice an <h3> tag that holds the title. It’s fairly easy to modify this and to add your own link and text.

<h3><a href="#">Lorem ipsum</a></h3>

Following that are the menu items, which are just unclassified list items with links. It’s straightforward enough to duplicate these items since they require no Bootstrap-specific styles, apart from the active class on the current link.

<ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    <li><a href="#">Dolor</a></li>
</ul>

The last list is for the dropdown menu. It features a single list item, with another, nested list that appears on hover over. The third line of the code below is the list item that appears constantly on the navigation bar, whereas the list starting at line 4 is the hover items.

<ul class="nav secondary-nav">
    <li class="menu">
        <a href="#" class="menu">Lorem ipsum</a>
        <ul class="menu-dropdown">
            <li><a href="#">Dolor sit</a></li>
            <li><a href="#">Amet Consequeter</a></li>
            <li class="divider"></li>
            <li><a href="#">Enough with the Latin</a></li>
        </ul>
    </li>
</ul>

As you’ll notice, adding an empty list item with the divider class will add a divider in the dropdown menu.

In use, your topbar should look something like this, positioned right at the top of your page.

<div class="topbar">
    <div class="fill">
        <div class="container">
            <h3><a href="#">WebDesignTuts+</a></h3>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Weekly Polls</a></li>
          </ul>
          <form action="">
            <input type="text" placeholder="Search" />
          </form>
          <ul class="nav secondary-nav">
            <li class="menu">
                <a href="#" class="menu">Lorem ipsum</a>
                <ul class="menu-dropdown">
                    <li><a href="#">Dolor sit</a></li>
                    <li><a href="#">Amet Consequeter</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Enough with the Latin</a></li>
                </ul>
            </li>
          </ul>
        </div>
    </div>
</div>

Note that you will want to compensate for the bar’s 40-pixel height at the top of your page, otherwise it will overlap the first elements on your page.

Tabs and Pills

Tabs and pills are insanely easy to create, as they are just regular old lists. Of course, they don’t function – Bootstrap is all about the styles. Simply construct your list with the tabs class for the tabbed interface, or the pills class for the pill tabs. Like in the navigation bar in the previous section, adding the active class to a list item will highlight it.

For the tab switcher, use something similar to this:

<ul class="tabs">
  <li class="active"><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a></li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Sit</a></li>
  <li><a href="#">Amet</a></li>
</ul>

To use pills instead, swap out the top line for the following.

<ul class="pills">

Pagination

We now move onto pagination, which is functionless (like the tabs and pills), but is still styled in Bootstrap. Bootstrap handles pagination buttons the same tabs, in a list which this time is wrapped in a <div> with the pagination class. Each list item can have a linked number in it (or an ellipsis), apart from the first and last items which are reserved for the prev/next links. These have the prev and next classes, respectively.

Additionally, any button can be disabled by adding the disabled class, and the active link is highlighted with the active class. Like so:

<div class="pagination">
    <ul>
        <li class="prev disabled"><a href="#">Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="next"><a href="#">Next</a></li>
    </ul>
</div>

Alerts and Error Messages

Alert bars are visually very similar to buttons, although they are constructed differently. Every error message is a <div> tag with the alert-message class. There are four different types of message, each with a corresponding class that must also be added:

• warning for a yellow bar
• error for a red bar
• success for a green bar
• info for a blue bar

Alert messages are then written as follows, selecting only one class from warning/error/success/info.

<div class="alert-message warning/error/success/info">
    <a class="close" href="#">&times;</a>
    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit.</p>
</div>

Just for your information, the second line of the code above adds the “×” to the right of the alter message, which could be linked to an action removing the message.

Alerts don’t need to be a one line affair either. If your message extends beyond a single line, simply add the block-message class to the code you’d use for a single line, while still using the different type classes.

<div class="alert-message block-message warning/error/success/info">
    <a class="close" href="#">&amp;times;</a>
    <p><strong>Lorem ipsum</strong> Fusce interdum euismod tempor...</p>
</div>

These messages are also able to hold buttons, useful if the alert needs to be resolved with a choice. If you check back to our section on buttons, you’ll know how to add these. Just make sure to use the small versions, by adding the small class to the button itself, and wrap it in a <div> tag with the alert-actions class.

<div class="alert-message block-message warning/error/success/info">
    <a class="close" href="#">&amp;times;</a>
    <p><strong>Lorem ipsum dolor sit amet!</strong> Fusce interdum euismod tempor...</p>
    <div class="alert-actions">
        <a href="#" class="btn primary small">Lorem ipsum dolor</a>
        <a href="#" class="btn small">Sit amet</a>
    </div>
</div>

Modals

Modals can be useful to show information in certain scenarios, commonly used for inputting data such as user information, or posts. Bootstrap’s modal is fairly simple, and is split into three sections; the header, the body and the footer. First, we start off by opening the modal’s <div> tag, and positioning it with some in-line styles that Bootstrap requires.

<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">

Inside that tag, we then place the three sections, the first being the header. The header has a class of modal-header and includes just two lines, an <h3> tag for the title, and the (optional) linked “×” that can be customized to close the popover.

<div class="modal-header">
    <h3>Lorem ipsum</h3>
    <a href="#" class="close">&amp;times;</a>
</div>

Next up, we have the main body of content. It’s very simple, being just a <div> with the modal-body class, and your content inside. As so:

<div class="modal-body">
    <p>Lorem ipsum dolor sit amet</p>
</div>

Finally, we have the modal footer (another <div>, this time with the modal-footer class) that generally consists of buttons to take action from. These are generated in exactly the same way as all the other buttons we’ve created with Bootstrap, so they need no additional explaining.

<div class="modal-footer">
    <a href="#" class="btn primary">Lorem ipsum dolor</a>
    <a href="#" class="btn">Sit Amet</a>
</div>

Okay, I lied. That wasn’t the final step. We still need to close off the original <div>.

</div>

Put all these parts together as one, and you get a pretty sweet modal window. Unfortunately, as I keep reminding you, Bootstrap is literally handling the styling here; the modal won’t actually appear as if it’s popped over. It would be awesome if Bootstrap expanded to have some functionality in addition to the CSS, but for the moment you’ll have to generate or source your own.

Final Thoughts

The image above shows our final design. It consists of all the elements we’ve created in this tutorial (there’s a seperate demo for the form elements), entirely within the scope of Bootstrap. Hopefully this article has been of use to you, especially since it can be difficult for some to decipher the included example page (which acts as the only documentation included in the download).

I love Bootstrap. If you’re new to web development, it provides a great range of elements to use, although your site might end up looking a bit too Twitter-ish through a lot of shared elements. Nonetheless, the simplicity and ease of use is too difficult to ignore if you don’t want to/can’t write your own. I can’t wait to try and use some of this stuff in a new project.

Additional Resources

Using Less CSS, BluePrint and WP for a Faster Workflow Wptuts+
Quick Tip: Never Type a Vendor Prefix Again Nettuts+
Bootstrap From Twitter Is A New Web Designer’s Dream Web AppStorm