🔖 Bootstrap - Basic understanding the 12-grid system
2018 - 03 - 24
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
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.
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
.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
About Me
Kavie. A registered optometrist from HK. An ICT graduate of University of Tasmania.
Have a passion in webdev and machine learning.
This site is built in Python & Django, JS ES6 & jQuery & Bootstrap.