Introduction

We saw how to use CSS rules to control the style and layout of a page.

Bootstrap is a collection of prewritten CSS rules used to build web pages faster. Bootstrap provides styles out of the box for several common components on a web page, such as grid layouts, navigation, showcases, and much more.

Let's see how to get started using Bootstrap in your web page.

Bootstrap-docs

The grid

A grid is a useful way to create page layouts. Rather than create layouts from scratch, HTML elements can be aligned to a grid in different ways to create custom layouts.

Bootstrap comes with a grid that is made up of 12 equal-sized columns. HTML elements are arranged to span different numbers of columns in order to create custom page layouts.

Page layout

<div class="row">

  <div class="col-md-6">
    <h4>Content 1</h4>
  </div>

  <div class="col-md-6">
    <h4>Content 2</h4>
  </div>

</div>

Try it out

Make a different page layout by changing the number of columns to span. For the first piece of content, make it span 8 columns by changing its class to col-md-8. For the second piece of content, make it span 4 columns by changing its class to col-md-4.


Try it out

Let's create another page layout, now with three pieces of content. Make the first piece of content span 2 columns by changing its class to col-md-2. Make the second piece of content span 8 columns. Make the third piece of content span 2 columns.


Tabs

Tabs are a common navigation technique that give links to different parts of a site. Tabs are seen in sites like Gmail and Codecademy.

Bootstrap makes it easy to create tabbed navigation. Let's see how to do this.

Bootstrap-tabs

Try it out

Below is a regular ul element. Let's use Bootstrap and turn it into tabs. To do so, make the class equal nav nav-tabs.


Try it out

The open tab is specified by the class active. Change which tab is open by moving class="active" from the second li element to the fourth li element. The effect that you should get is that it opens the fourth tab.


Pills

Pills are a set of buttons that give links to different parts of a site. Pills are seen in sites like Google's search results page.

Bootstrap makes it easy to create pill navigation. Let's see how to do this.

Bootstrap-pills

Try it out

Below we have used Bootstrap to style the ul element as tabs. To change the tab navigation to pill navigation, replace the class nav-tabs with nav-pills.


Jumbotron

Many sites have a large showcase area featuring important content. Showcases are seen on sites like Google Mobile and Apple.

Bootstrap calls this large showcase a jumbotron. A jumbotron is used to call extra attention to important content on the site. Let's see how to use it.

Bootstrap-jumbotron

Try it out

Change this unstyled div to a jumbotron. In the opening <div> tag, add the class "jumbotron".


Summary

By adding Bootstrap classes to your HTML elements, you can make use of Bootstrap's CSS to build your page faster. This lets you quickly set up the basic styles and layout so that you can get to the more interesting aspects of your page's design.

Bootstrap provides CSS for many more web components. Check out this site to see how else you can use Bootstrap to style your HTML elements!

Bootstrap-summary
  • ?