Bootstrap-Tutorial-series-bootstrap-column-multiple-columns-helper-classes-layout-responsive-layout-hfarazm

Tutorial 4: Understanding the bootstrap Grid System (Columns)

In Bootstrap by mubeenLeave a Comment

In this tutorial we will discuss:

  1. Bootsrap Column Layout
  2. Multiple Column Classes
  3. Bootstrap Helping Material
    1. Video
    2. Project Files
    3. Quiz

In Previous tutorial, we discussed the grid system and, the use of containers and rows.

Columns

Columns take your design and divide it into vertical groups, making it responsive. When they are created, gutters are also created. The gutters add 15px on each side of the column. Bootstrap divides a row into 12 columns.

Columns Layout

To divide the element into columns, add “col-SIZE-SPAN” in that element within the row div. The contents of the code are as follow:

  • col: Key word
  • Size: Specifies size w.r.t breakpoints
  • Span: Specifies the number of column

Size of Columns

Bootstrap provides 4 different column sizes based on breakpoints that are used for different screen sizes:

  • col-xs =  For extra small devices
  • col-sm = For small devices
  • col-md = For medium devices
  • col-lg =    For large devices

Note: Layout changes to full width on the change of the breakpoints.

Multiple Column Classes

Multiple column classes can be used within a single div to adjust the contents of webpage w.r.t to different breakpoints.

Offset columns:

Offset shifts content to the right side, leaving specified number of columns on left side of the webpage.

The following example shows multiple and offset column classes:

Example:

Try it yourself..!!

Code Explanation:

Line 22,27:

  1. “col-sm-6” specifies that the content occupies 6 columns for device size >= 768 pixels and will change to single column if size < 768.
  2. sg-col” is the custom class for external CSS

Line 34: Multiple column classes are used.

  1. “col-sm-6” changes the layout to 2 columns (6*2 = 12), each of 6 column width for device size >= 768px.
  2. “col-md-4” changes the layout to 3 columns (3*4=12) , each of 4 column width for device size >= 992px.
  3. “col-lg-3” changes the layout to 4 columns (4*3=12) , each of  3 column width for device size >= 1200px.
  4. “col-mul” is for external CSS.

Line 44: Bootstrap helper class to remove styles of parent div.

Line 47: “col-xs-offset-3” offset 3 columns from left for device size < 750px and shifts contents to the right.

Conclusion:

In this tutorial, we have discussed bootstrap columns classes, how to use multiple and offset column classes of bootstrap.

In the next tutorial, we will discuss bootstrap helping classes and will design our first bootstrap page.. See you next time.


Bootstrap Tutorial 4: Quiz Questions

Please enter your email to start FREE quiz.


Share this Post