Home > bootstrap > Understanding Bootstrap's Grid System

Understanding Bootstrap's Grid System

November 11Hits:2
Advertisement

Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. In my last article, Responsive Web Design Tips from Bootstrap’s CSS, I explained how Bootstrap functions as a responsive framework. In this article, we will discuss a related topic: The Grid System, one of the most important concepts in Bootstrap.

What is the Bootstrap Grid System?

Like any grid system, the Bootstrap grid is a library of HTML/CSS components that allow you to structure a website and place a website’s content in desired locations easily.

Think of graph paper, where every page has a set of vertical and horizontal lines. When these lines intersect, we get squares or rectangular spaces.

Understanding Bootstrap's Grid System


By Sfoerster (Own work) CC-BY-SA-3.0, Understanding Bootstrap's Grid System

Well, this is also true for Bootstrap’s Grid System. It allows you to create rows and columns and then place content in the “intersected” areas.

Now the question is, how many rows and columns you can create using Bootstrap’s Grid System? Bootstrap allows you to create up to 12 columns and unlimited rows — hence the name 12-Grid System. So, let’s see how we can utilize this grid system to create various types of layouts.

Getting started with Bootstrap’s Grid System

To get started, naturally, you’ll need to have the necessary assets in your page to get Bootstrap working. If you’re new to Bootstrap, you can refer to our previous article Getting started with Bootstrap or my book Jump Start Bootstrap, to dig deeper.

Bootstrap’s Grid System is made up of 3 things:

  1. A container
  2. Rows
  3. Columns

Let’s explore each of the above in detail.

Creating a Container

Bootstrap’s grid system needs a container to hold rows and columns. A container is a simple <div> element with a class of .container. The container is used to provide a proper width for the layout, acting as a wrapper for the content.

Take a look at the following CodePen demo:

See the Pen Bootstrap grid container demo by SitePoint (@SitePoint) on CodePen.

Here the container element wraps the content and sets left and right margins. It also has different fixed widths in different sized devices. Have a look at the following table:

Device Width Container Width
1200px or higher 1170px
992px to 1199px 970px
768px to 991px 750px
Less than 768px auto

You can choose a fluid container if you are not fond of a fixed layout. To do this, you use the class .container-fluid. A fluid container has no fixed width; its width will always be the width of the device.

Just note that both fixed and fluid containers have padding of 15px on the left and right sides.

Creating a Row

A row acts like a wrapper around the columns. The row nullifies the padding set by the container element by using a negative margin value of -15px on both the left and right sides.

A row spans from the left edge to the right edge of the container element. It is created by adding the class .row to a block level element inside the container.

Have a look at the following CodePen:

See the Pen Bootstrap grid demo with row by SitePoint (@SitePoint) on CodePen.

In this demo, you can see the text touching the left edge of the container element. This is because the container’s padding has been removed by the row due to the negative margins on the row.

Finally, there’s no limit on the number of rows you can create.

Creating Columns

Bootstrap uses different column class prefixes for different sized devices. These prefixes are shown in the table below:

Class Prefix Device Size
.col-xs- <768px
.col-sm- 768px to 991px
.col-md- 992px to 1199px
.col-lg- ≥ 1200px

So, let’s create our first Bootstrap column:

See the Pen Bootstrap Grid demo with row and column by SitePoint (@SitePoint) on CodePen.

In the above demo, I used the class .col-xs-12 to create a single column that spans across 12 virtual Bootstrap columns. Hence, this column’s width will be the width of the row.

In the above demo, you will also see the 15px padding reappear to push the element away from the container. This is because every column in Bootstrap has a padding of 15px.

You must be wondering why I used the class prefix that belonged to extra smaller devices, which is .col-xs-. In Bootstrap, if a column is defined for a particular type of device then it is guaranteed to behave similarly in larger devices as well. Therefore, a column defined for extra smaller devices will work in all types of devices.

Let’s now create a 2-column layout for smaller devices and check out its behaviour in larger devices and extra-small devices. We will use the class prefix .col-sm- here. To create 2 columns of equal widths, we should assign 6 virtual Bootstrap columns to each one of them. This way, we maintain the limit of 12 virtual Bootstrap columns for a single row.

Here’s the demo:

See the Pen Bootstrap grid demo, 2 columns by SitePoint (@SitePoint) on CodePen.

Nesting with the Grid System

Nesting is one of the ways to create complex designs using Bootstrap’s grid system. It is also the one section where many first-timers have trouble.

We understand that to use Bootstrap’s grid system, we need 3 things: A container, rows, and columns. So to nest a grid system within a column we will need the same three things. But the only difference is that the container is already defined. In this case, the columns will behave as the containers for the nested grid system.

Here’s the logic: The containers provide 15px of padding, which is nullified by the row. Then we define columns that again have 15px of padding on the left and right side. So, to nest a grid system within a column, we simply need rows and columns. No .container or .container-fluid elements are necessary for a nested grid system.

Here’s an example of a nested grid system:

See the Pen Bootstrap grid demo with nested columns by SitePoint (@SitePoint) on CodePen.

What About More than 12 Columns?

This is one of the root causes for disordered Bootstrap layouts. A wrong calculation in deciding the number of virtual Bootstrap columns can lead to an improper layout.

In such a case, a virtual row will be created and unfitted columns will shift to the next row. For example, if you have defined 2 columns with the classes .col-md-8 and .col-md-5, the second column will shift to a new row because it requires 5 virtual Bootstrap columns whereas only 4 are left.

Helper Classes

Bootstrap provides various helper classes that can be useful in certain situations in dealing with grids. These classes are:

  • .clearfix: Normally used to clear floats, adding this class to any column will make it shift to a new row automatically, to help you correct problems that occur with uneven column heights.
  • Offsetting columns: You don’t have to occupy all 12 of the virtual columns. You can use offset classes like .col-xs-offset-* or .col-md-offset-* to leave a particular number of virtual Bootstrap columns to the left of any column (kind of like invisible place holders).
  • Reordering: Use classes like .col-md-push-* and .col-md-pull-* to shift a column to the right or left, respectively.

Complimentary Code Snippet

To conclude, here is a complimentary code snippet for a 3-column layout with a responsive Bootstrap navigation bar. Have fun and let me know in the comments if there’s anything in Bootstrap’s grid system that I haven’t discussed here that you find interesting, problematic, etc.

See the Pen Bootstrap 3-column grid example by SitePoint (@SitePoint) on CodePen.

(Just note that the 3-column layout won’t appear in the CodePen embed above, but you can view it at full screen).

Related Articles

  • Understanding Bootstrap's Grid System

    Understanding Bootstrap's Grid SystemNovember 11

    Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. In my last article, Responsive Web Design Tips from Bootstrap's CSS, I expla

  • Bootstrap's Grid System vs. Susy: A Comparison

    Bootstrap's Grid System vs. Susy: A ComparisonAugust 29

    There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I'll like to introduce you to a slightly lesser kn

  • Custom bootstrap like grid system with HTML and CSS February 7

    How to implement Custom bootstrap like grid system with HTML and CSS? Or how does bootstrap internally implement grid system ? --------------Solutions------------- As Won Jun Bae suggested, the best way to learn it to check out Bootstrap CSS files. H

  • Grid System Comparison: Bootstrap 3 vs. Foundation 5

    Grid System Comparison: Bootstrap 3 vs. Foundation 5January 6

    Bootstrap and Foundation are two of my favorite front-end frameworks, especially for rapid website prototyping. Both come with ready-to-use components that speed up my workflow. Beyond their small differences, most of their fundamental features look

  • Understanding Bootstrap Modals

    Understanding Bootstrap ModalsFebruary 18

    In my previous tutorial, I explained how powerful Bootstrap 3 is for a novice designers. It ships with some of the best ready-to-use JavaScript and jQuery components and plugins. Recently the framework got a major update with version 3.1.0, bringing

  • Understanding CSS Grid Systems from the Ground UpMarch 11

    Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying t

  • Ionic grid system 3x3 not applying

    Ionic grid system 3x3 not applyingFebruary 2

    I am trying to create this with the grid system of Ionic My html code: <ion-content> <div class="row responsive-md" > <div class="col col-33"> <div> <a ng-repeat="gin in gins" href="#">

  • How I can use grid system of bootstrap in views-exposed-form.tpl.php?November 6

    I have a form with filters exposed and I want to apply the bootstrap grid system for each input to adapt to different devices, but in the views-exposed-form.tpl.php I don't know how to access each generated input.

  • Border each item without padding in Bootstrap Grid System while keeping distance between themJanuary 14

    I want to border each item in Bootstrap Grid System while keeping distance between them but struggle to achieve so. Here is a simple Codepen to illustrate what I'm trying to achieve: http://codepen.io/anon/pen/xZLNqY .card-box .image img { width: 100

  • My Grid system using bootstrap is not working properly

    My Grid system using bootstrap is not working properlyJanuary 25

    I wrote simple grid system using bootstrap and compiled in chrome. but those grid system is not displaying properly. code:- <!doctype html> <html> <head> <title>Gris system</title> <link rel="stylesheet" href=&qu

  • Bootstrap cards/thumbnails not lining up side by side correctly in the grid system & card deckFebruary 6

    I'm having a problem with getting Boostrap's thumbnails & cards to line up side by side in their grid system. Basically, this is an assignment & I have to follow certain parameters: -must use Bootstrap grid system sm-size columns -these squares of

  • Bootstrap Grid System on mobiles?February 11

    See the following JSFIDDLE <div class="row"> <div class="col-md-3 col-xs-6"> <div style="background: blue;"> test & test & </div> </div> <div class="col-md-3 col-xs-6"> &l

  • How to create interfaces in a graphics editor for responsive grid systems considering that they aren't pixel-perfect? September 7

    Any responsive CSS grid system uses long decimal point percentage values for columns' width (e.g. "16.66666667%"). I don't understand how to lay out the grid in Photoshop, because elements of the interface will either be longer, or shorter than

  • Introducing sGrid: A Stylus-based Flexbox Grid SystemDecember 2

    After reading the title of this post, you might ask: Why another grid system? This is a good question. Basically there are plenty of grids out there and many of them are flexbox grids too. So why have I built another tool that's similar? The short an

  • Mixing the classic type size scale, grid systems and modular scalesNovember 25

    I'm coming from a programmers background and just trying to understand how sizes should relate. I read in the book "designing for the web" that these are the classic type sizes and text set in these size should look better if typeset correctly.

  • Recommended grid systems or layouts for large display and responsive designs

    Recommended grid systems or layouts for large display and responsive designsJune 16

    I've been working with 960 layout for years – but was wondering if there are other grid systems that are strongly supported by the design and development community and also have blank or starter pages to work with. --------------Solutions------------

  • Blocks and CSS Grid Systems

    Blocks and CSS Grid SystemsSeptember 12

    How do I achieve the following in Drupal: <div class="row"> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4

  • A Creative Grid System With Sass and calc()March 27

    Before we even get started talking about Sass and the code for this project, let me remind you this is no more than a quick experiment which by no means should be used in a live context. So what follows is only a proof of concept of what we could do

  • SASS grid system improvementsJune 3

    I've got this own made grid system made in SASS: @import "../mixins/cross-browser-elements/box"; $columns: 12 !default; $gutter-width-px: 20px !default; @function calculate-column-width($index) { @return percentage($index / $columns); } .row { o

  • How to create a grid system on a tri fold leaflet or brochure in InDesign

    How to create a grid system on a tri fold leaflet or brochure in InDesignSeptember 11

    I'm new to working with grids and tri folds, and I was wondering if anyone could help me out? As you well know when creating a tri fold, the fold in panel width becomes a different size than the other two panels. And from some templates I've download

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.670 s.