Styling your apps with Twitter Bootstrap

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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:

Here's another example of some markup with a screenshot to illustrate (Figure 17):

To create containers with a fluid layout, you simply specify fluid within the container and row class, as follows:

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.

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.

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

Here is the JavaScript that you use to create the Popover overlay:

For a complete list of available plugins and examples, see JavaScript for Bootstrap (jQuery plugins) on the Twitter Bootstrap site.

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:

20 Resources that Complement Twitter Bootstrap

• Twitter Bootstrap Tutorial
• jQuery Mobile Bootstrap Theme
• Create Styles for Bootstrap
• jQuery UI Bootstrap
• Themes
• Themes you can pay for
• Button Customizer for Bootstrap