Bootstrap Grid system

Bootstrap Grid system
Nikhil
Published on 2021-07-24 13:22:34

The grid system in Bootstrap is made up of 12 units called Columns (.col-*-* CSS classes) that are used to layout content across the viewport from left to right. To build horizontal groups of columns, columns are included within Rows (.row CSS class). For proper alignment, rows are placed within a fixed or full-width Container (.container or .container-fluid, respectively). Padding in columns produces a space (known as a "gutter") between the columns' content.

The fluid grid architecture in Bootstrap is responsive and mobile-first, scaling up to 12 columns as the device or viewport size grows. It comes with predefined classes for quickly putting together page layouts using a sequence of rows and columns to hold your information.

Media Queries Examples

With Bootstrap's Media Queries, you can move, show, and hide content based on the viewport size. To create the key breakpoints in the Bootstrap grid system, the following media queries are utilised in LESS files:

Example:

<div class="container">
    <div class="row">
        <div class="col-sm">
            One of three columns
        </div>
        <div class="col-sm">
            One of three columns
        </div>
        <div class="col-sm">
            One of three columns
        </div>
    </div>
</div>

 

Bootstrap Grid Tiers (Breakpoints)

In addition to column units, Bootstrap has tiers, which are different breakpoints or grid sizes. To accommodate varying screen (or viewport) widths, the Bootstrap 3 grid contains four layers. xs, sm, md, and lg are the three Bootstrap tiers. Different col-breakpoint-units CSS classes identify the grid columns in Bootstrap.

Each grid tier has a range of screen widths that are optimized for common devices like desktops, laptops, tablets, and smartphones. CSS media queries are used by Bootstrap to build responsive breakpoints that set a limit for each grid size. The basis of responsive design is the ability to adjust the layout of columns to better meet different screen widths and devices__ and these grid sizes allow you to do just that.

  • col-xs-* — for the smallest screen widths like smartphones < 768 px
  • col-sm-* — for small screen widths like smartphones and tablets >= 768 px
  • col-md-* — for medium screen widths like tablets and laptops >= 992 px
  • col-lg-* — for large screen widths like desktops >= 1200 px

 

Bootstrap Rows & Columns

Columns are 12 units in Bootstrap's grid system that may be used to layout information horizontally across the screen. The reason for a 12-unit grid (rather than 10, 16, or other numbers) is that 12 divides equally into 6 (halves), 4 (quarters), and 3 (thirds) (thirds).

This makes it much easier to adapt to different layouts. Different col-breakpoint-units CSS classes identify the grid columns in Bootstrap.

Col-md-3, for example, denotes a column that occupies 3 of the 12 units (or 25%) of a medium (md) width viewport. Simply use the proper col-breakpoint-units class in your HTML markup to employ a column width in your layout.

Column units in Bootstrap 

  • • col-*-1: 1 of 12 (8.33333333% width)
  • • col-*-2: 2 of 12 (16.66666667% width)
  • • col-*-3: 3 of 12 (25% width)
  • • col-*-4: 4 of 12 (33.3333333% width)
  • • col-*-5: 5 of 12 (41.66666667% width)
  • • col-*-6: 6 of 12 (50% width)
  • • col-*-7: 7 of 12 (58.33333333% width)
  • • col-*-8: 8 of 12 (66.66666667% width)
  • • col-*-9: 9 of 12 (75% width)
  • • col-*-10: 10 of 12 (83.33333333% width)
  • • col-*-11: 11 of 12 (91.66666667% width)
  • • col-*-12: 12 of 12 (100% width)

The Columns are contained in the Bootstrap .row class. Rows should always be placed inside Containers, and Columns should always be placed in Rows (container or container-fluid).

Negative margins (-15px) are used in the Row to provide adequate spacing between the column's content and the browser's edge. Horizontally, rows are used to group columns.

<div class="container">
    <div class="row">
        <!-- one more columns -->
        <div class="col-{breakpoint}-{units}">..</div>
    </div>
</div>

Columns will fill the .row horizontally from left to right, and every 12 column unit will wrap to a new line.
As a result, you may use .rows to construct horizontal breaks or more than 12 column units in a single .row element to create columns that wrap (or stack) vertically along with the screen.
You'll need to utilize responsive resets (or clarifies) when utilizing column wrapping (more than 12 units in a.row) to ensure even wrapping of uneven column content. When the content of the columns varies in height, this is critical.

Containers

Bootstrap requires a contained element to enclose the contents of the site and house our grid system. You have the option of using one of two containers in your projects.

For a responsive fixed width container, use the.container class.

<div class="container">
...
</div>

Use .container-fluid class for a full-width container, spanning the entire width of your viewport.

<div class="container-fluid">
...
</div>

 

Offsetting columns

<div class="row">
    <div class="col-lg-4"></div>
    <div class="col-lg-4 col-lg-offset-4"></div>
</div>
<div class="row">
    <div class="col-lg-5 col-lg-offset-1"></div>
    <div class="col-lg-5 col-lg-offset-1"></div>
</div>

 

Column order manipulation using push and pull

<div class="container content">
    <div class="row">
        <!--Main Content-->
        <div class="col-lg-9 col-lg-push-3">
            Main Content
        </div>
        <!--Sidebar-->
        <div class="col-lg-3 col-lg-pull-9">
            Sidebar
        </div>
    </div>
</div>

This changes the order of the built-in grid columns.

Syntax: .col-md-push-* and .col-md-pull-*.

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website