Tutorial 3: Understanding the bootstrap Grid System (Containers & Rows)

In Bootstrap by hfarazmLeave a Comment

In this Bootstrap tutorial, we’ll learn:

  1. Bootstrap grid system
  2. Breakpoints
  3. Container & its types
  4. Rows
  5. Bootstrap Helping Material

In previous tutorial, we learnt about the bootstrap components that are necessary to start working on Bootstrap.

Grid System

Grid system is the base of bootstrap responsive layout. Bootstrap comes with 12-column grid layout that can be accessed via CSS classes. Three key layouts exist that form the basis of the grid system: containers, rows and columns. We will discuss containers and rows layout in this tutorial and, column layout in the next tutorial.

Breakpoints

In the grid system, breakpoints are used to make the webpage layout responsive. Breakpoints in bootstrap are as follows:

Grid System

These breakpoints can be used by adding bootstrap classes. The grid system can be visualized at the bootstrap website via this link https://v4-alpha.getbootstrap.com/layout/grid/.

Container

Container class is the base of grid system that controls the layout. Rows and columns should be enclosed within the container to work properly.It creates a padding of “15 pixels” on each side of the page content.

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Container Example (BP3)">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Container Example</title>

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
  <h3>Without container</h3>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias facere, repudiandae sequi, quidem voluptatibus sint aut? Fuga error facilis recusandae officia reiciendis delectus animi. Animi, consequatur. Similique optio, dolores necessitatibus.
  </p>

<div class="container">
      <h3>Inside Container</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda velit sapiente, laboriosam in deserunt, nisi libero nostrum dolore rerum iusto inventore impedit sit dignissimos quibusdam delectus harum accusamus! Tempora, sapiente.
      </p>
</div>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JQuery CDN -->
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
</body>
</html>

Click to view in full screen

Code Explanation:

Line 16-19: Content is not inside the container so it touches the page borders.

Line 21-26: Content is enclosed within the div having a container class, creating 15 pixels padding on left and right side of page.

Types of Container

There are two types of Container:

  1. Fixed-Width
  2. Fluid

Fixed-Width

Fixed-width container manages the page content with respect to fixed breakpoints (described above). It will change the content orientation with the change in breakpoints. You can use class= “container” within the div to get a fixed-width container.

Fluid:

Fluid container adjusts  the content with respect to device size. Content will adjust itself without breakpoints, making the content pixel perfect. You can use class= “container-fluid” to get a fluid container. 

Examples

In the following example, container and container-fluid classes can be visualized by difference of padding on left and right side. Container (fixed) follows its breakpoints and will change the layout when breakpoints change while container-fluid adjusts content according to actual screen size.

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="container & container-fluid BP3">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Container , container-fluid</title>

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>

<body>
<div class="container">
  <h3>Inside Fixed Container</h3>
  <p>Content will change its layout after reaching specific breakpoints. Can be visualized by changing screen size or by dragging result pan in live preview  </p>
</div>

<div class="container-fluid">
  <h3>Inside Container Fluid</h3>
  <p>Content will change its layout with respect to screen size without any breakpoints. Can visualize difference by changing screen size by dragging result pan in live preview </p>
</div>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JQuery CDN -->
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
</body>
</html>

Click to view in full screen

Code Explanation

Line 17-20: Content, enclosed in ‘div’ having the class ‘container’, will change its layout after change in breakpoints. It can be visualized by changing screen size or by dragging result pan in live preview.

Line 22-25: Content, enclosed in ‘div’ having the class ‘container-fluid’, will change its layout with respect to screen size without any breakpoints. The difference can be visualized by changing screen size by dragging result pan in live preview.

Rows:

Rows in bootstrap are horizontal divisions. Each row can be divided into 12 columns. A row should be enclosed in a container div (either fluid or fixed). We can add multiple rows as per our requirement.

Note: Rows remove padding given by container class to align to the grid properly. /text_output]

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Row Example">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Using Row class</title>

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>

<div class="container">
 <h3>Without Row class</h3>
  <p>This content is outside row class and has padding on both left and right side of content.</p>

  <div class="row">
  <h3>Inside Row</h3>
    <p>It does not have padding on sides of content as Row class removes padding from both sides of content</p>
  </div>

</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JQuery CDN -->
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
</body>
</html>

Click to view in full screen

Code Explanation

Line 18-19: Content is without Row class and has default container padding on both sides.

Line 21-24: Content is enclosed within the ‘div’ having the ‘row’ class. Padding is removed from both sides of the content.

Conclusion

In this tutorial, we have discussed the grid system and its elements except for columns. In the next tutorial, we are going to discuss bootstrap columns, its types and usage.

Hope you liked it. See you next time.

 In the next tutorial, we will take a look at bootstrap columns and will create a cool landing page.


[WpProQuiz 4]