Bootstrap-Tutorial-series-grid-system-container-containers-column-breakpoint-breakpoints-row-rows-hfarazm

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

In Bootstrap by mubeenLeave 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.

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.

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]

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.


Bootstrap Tutorial 3: Quiz Questions

Please enter your email to start FREE quiz.