Bootstrap is the most common and handy tool for prettifying your website by CSS. It decorates your site by providing a library of
Classes from which you can build a responsive webdesign, space & position your contents and make pretty forms and buttons, etc.
To get started, we need to have our
.html
set like this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body>
<!-- jQuery, popper and Bootstrap js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
1.
[Grid-System]
To position every block or content, Bootstrap provides classes that runs the 12-grid system.

This popular CSS system divides a page into 12 columns of same width. By using the classes Bootstrap provides, we can easily define if certain content should occupy 1 or 3 or even 100% width in a container.
e.g.
<div class='col-3'>
This occupies 3columns
</div>
<div class='col-7'>
This occupies 7columns
</div>
<div class='col-2'>
This occupies 2columns
</div>
To effectively use the 12-grid system, we need to enclose the above snippets into a container:
<div class='container'>
<div class='row'>
<div class='col-3'>
This occupies 3columns
</div>
<div class='col-7'>
This occupies 7columns
</div>
<div class='col-2'>
This occupies 2columns
</div>
</div>
</div>
Such that it becomes
This occupies 3columns
This occupies 7columns
This occupies 2columns
2.
[Responsive grids]
So the grids are now properly shown in 3-7-2 ratio on desktop, but how about on mobile devices?
To make the site becomes responsive to devices, we can add more classes in each of the above
div
:
<div class='container'>
<div class='row'>
<div class='col-12 col-lg-3'>
This occupies 3columns
</div>
<div class='col-12 col-lg-7'>
This occupies 7columns
</div>
<div class='col-12 col-lg-2'>
This occupies 2columns
</div>
</div>
</div>
The original classes now become
col-lg-*
which means they are only run on
large (lg) or larger screen. Meanwhile, three
col-12
are added so have each of them will occupy all 12 columns on
extra small (xs) to
medium (md) screen size.
You may take a look on this table for better understanding on the definition of extra small to extra large.