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.
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.
<div class="row"> <div class="col-md-6"> <h4>Content 1</h4> </div> <div class="col-md-6"> <h4>Content 2</h4> </div> </div>
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
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.
Below is a regular ul element. Let's use Bootstrap and turn it into tabs. To do so, make the
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 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.
Below we have used Bootstrap to style the ul element as tabs. To change the tab navigation to pill navigation, replace the class
Change this unstyled div to a jumbotron. In the opening
<div> tag, add the class "jumbotron".
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!