🔖 Bootstrap - Basic understanding the 12-grid system

2018 - 03 - 24
🔖 Bootstrap - Basic understanding the 12-grid system
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.

Comments

There is no comment yet

New Comment

Please Login to comment