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

Tutorial 3: Grid System, Containers, Rows & Breakpoints

In Bootstrap by Sarmad JavaidLeave a Comment

In this Bootstrap tutorial, we’ll learn:

  1. Bootstrap grid system
  2. Bootstrap breakpoints
  3. Container & its types
  4. Working with rows
  5. Bootstrap Helping Material

In previous tutorial, we integrated bootstrap and necessary components  to start working on Bootstrap.

Grid System

Grid system is base of bootstrap responsive layout. Grid system is divided into rows and columns. Each row is divided into 12 columns and each column can further be divided into 12 columns as per requirement. We will discuss column layout in next tutorial.

Bootstrap Breakpoints

In grid system, bootstrap use breakpoints to change webpage layout for different screen resolutions. Bootstrap breakpoints are as follows:

Grid System

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

Grid system classes

Bootstrap use classes to access page elements. These classes are predefined and are inserted in standard HTML tags to customize layout.

Grid system has three main layout classes and are used inside “div” tag.

  1. Containers
  2. Rows
  3. Columns

Container

Container class is base of grid system. Rows and columns should be enclosed in a container to work properly.It creates “15 pixels” padding on both left and Right side of the page content.

Click to view in full screen

 Code Explanation:

Line 16-19: Content is not inside container so touching page borders.

Line 21-26: Content is enclosed in div having container class. Creates 15 pixels padding on left and right side of page.

Types of Container

There are two types of Container classes

  1. Container (For Fixed Container w.r.t breakpoints)
  2. Container-fluid (For responsive container)

Container (Fixed Container)

Container class manages page content with respect to fixed breakpoints (described above). It will change content orientation with the change in breakpoints.

Container-Fluid:

Container-fluid class adjusts  content with respect to device size. Content will adjust itself without breakpoints making content pixel perfect. We can use container fluid class as under:

 Examples

In following example container and container-fluid class can be visualized by difference of padding on left and right side. Container (fixed) is following its breakpoints and will change layout when breakpoints change (results in more padding) while container-fluid adjusts content w.r.t actual screen size.

Click to view in full screen

Code Explanation

  • Line 17-20: Content is enclosed in ‘div’ having class ‘container’ will change its layout after change in breakpoints. Can be visualized by changing screen size or by dragging result pan in live preview
  • Line 22-25: Content is enclosed in ‘div’ having class ‘container-fluid’ 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

Working with rows:

Rows in bootstrap creates 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: Row removes padding given by container class to properly arrange columns.

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 in ‘div’ having ‘row’ class. Padding is removed from both sides of content.

Conclusion

In this tutorial we discussed grid system and its elements. In the next tutorial we are going to discuss bootstrap columns, its types and usage. And start designing our first bootstrap page.

Hope you like our effort. See you in next tutorial…..

 In the next tutorial we take a look at basic grid system and navigation bar  of bootstrap and will create a cool landing page.


Bootstrap Tutorial 3: Quiz Questions

Please enter your email to start FREE quiz.