make web site 2 bootstrap

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.

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.

Bootstrap's grid is made up of 12 equal-sized columns. Each piece of content is aligned to this grid by specifying the number of columns to span.

The code to the right uses Bootstrap's grid to create a layout with two pieces of content.

Here each piece of content spans six columns, so it uses the .col-md-6 class.

Both columns are wrapped in a .row class to create a horizontal group.

<ul class="nav nav-tabs">

<li><a href="#">Primary</a></li>

<li class="active"><a href="#">Social</a></li>

<li><a href="#">Promotions</a></li>

<li><a href="#">Updates</a></li>

</ul>

<ul class="nav nav-pills">

<li><a href="#">Primary</a></li>

<li class="active"><a href="#">Social</a></li>

<li><a href="#">Promotions</a></li>

<li><a href="#">Updates</a></li>

</ul>

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!