By 

Bootstrap Grid System – Step by Step Understanding


Hi guys, whats up, hope it’s going all good. Anything interesting happened, do share in comments. Well, coming to the topic, in this post we will be discussing in detail the key concepts about Bootstrap grid system with examples. This post is split into two parts:

·         Bootstrap grid system – part 1 covers concepts, how tos, and examples with code

·         Bootstrap grid system – part 2, in this post we will build custom bootstrap theme from scratch as well as study what is left in this post 🙂

What is Included Inside:

·         Key concepts about Bootstrap grid

·         Dimensions about Grid columns

·         Bootstrap Grid classes

·         Handy Checklist

·         Code and syntax

·         Grid Rules

·         Basic Layout with examples

·         Step by step on building a grid

·         Practical example of building a web design with grid

·         Top questions and answers about grid

Key Bootstrap Concepts

So what is basically a grid system, when and where to use it, what makes it useful? To answer these questions, let me ask you a few things. Have you seen a website design similar to any of these?

Bootstrap Layout example

Bootstrap layout example 2

The above templates have different layouts. If you were to build similar designs, how would you build one, will you use table based layout or any other scheme? Today, we need responsive designs, so you will have to ensure that the design you build is responsive as well. Lots of other things like design scalability is part of the development checklist as well.

Designers and developers work hard to make sure that website design is according to the customer requirements; it is responsive, easy to troubleshoot and modify.

If you ask me is there a way to build above layout keeping in mind the design principles and other stuff we discussed above. I would say 100% yes with bootstrap. I am not afraid to say that Bootstrap is a magic wand with which you can cast spell in a web design. Anything you want to build, its just 1 , 2 and 3 in bootstrap. We will discuss each and every element of Bootstrap in next tutorials.

So what is basically a grid system, when and where to use it, what makes it useful? To answer these questions, let me ask you a few things. Have you seen a website design similar to any of these?

What is a Bootstrap Grid?

Bootstrap divides a page into 12 equal sized columns, the arrangement of these columns is called a Bootstrap grid.

Bootstrap Grid Columns

You can combine columns to make a custom layout as below.

Bootstrap combine columns

Bootstrap Columns Width

·         If not responsive, then all 12 columns make up 940px wide container

·         If responsive, the grid system makes 720px in height and 1170px in width.

·         Below screen resolution of 767px, all columns stack vertically

Bootstrap Rows

You can divide a page into as many rows as you want. Each row can be divided into 12 columns, more than that will stack vertically.

Note: If you divide a row into more than 12 columns, they will stack vertically. We will look into this shortly.

Bootstrap Classes – Grid compatibility for different devices

Bootstrap allows you to use different layouts on different devices without writing extra code. For example, layout ‘a’ is designed for medium to larger desktop screen sizes whereas layout ‘b’ is designed for tablets. You do not need to write separate code for both layouts; instead, you will write only one piece of code and use bootstrap classes to differentiate between different screen sizes. We will study it with the help of code shortly. But let us just understand what the concept of bootstrap classes is.

Bootstrap grid system has following 4 classes. Each class scales up, meaning that if you use only ‘md’ class then it will be applicable on larger devices as well.

·         xs (for phones)

·         sm (for tablets)

·         md (for desktops)

·         lg (for larger desktops)

Now here is the trick,

<code class=”{sm-size for tablets} {md=size for mid to larger screens}”>

The above style of code will provide different layouts for tablets and larger devices. We will study the syntax shortly, this is just for understanding. So we will just add these classes and that’s all.

Key Points about Bootstrap Grid Concepts:

·         You can use a grid where it is needed, you need not to create whole page with grid. For example, at the bottom of blog page, you can create a grid of 2 columns to display avatar on left column and user comment on right column.

·         Use bootstrap grid classes to define compatibility for different screen sizes. Use the lowest possible class e.g. if you are targeting only large devices, preferably use ‘md’ class because if you use only ‘lg’ class for larger devices then on all medium and small devices, columns will stack vertically.

·         You can combine bootstrap grid classes in each row (will study in next tutorial)

·         Bootstrap grid rows are nestable (will study in next tutorial)

·         Maximum columns are 12 in a row, e.g. col-md-6 and col-md-6 makes total 12 columns. If you use col-md-6 and col-md-10 in a row, then both columns will stack vertically.

·         Content should be placed within columns

·         You can use ‘clearfix’ to prevent unwanted wrapping of columns (will study in next tutorial)

·         You can offset columns, means, increase left margin (will study in next tutorial)

·         Larger screen resolution starts at 1200px (col-lg-*). Column width in this case is 97px

·         Medium devices screen resolution starts at 992px (col-md-*). Column width in this case is 81px

·         Screen resolution for tablets start at 768px (col-sm-*). Column width in this case is 62px

·         Small devices are below 768px (col-xs-*). Column width in this case is auto.

·         Default gutter width is 15px on each side of a column

Code and Syntax:

Now that you know what the hell is Bootstrap grid, what are its components, let’s talk about syntax.

Grid Rules:

·         Bootstrap requires everything to be placed in a container (containers are not nestable)

·         BS containers can be fixed width (.container) or full width (.container-fluid)

·         Create rows that will host bootstrap columns

·         Each row should be in a <DIV>

·         Rows can be nested

Basic Layout:

Step by Step

Step 1 – Define a container

Step 2- Create a row

Step 3 – Create columns

The only way to create columns is to use Bootstrap grid classes. Now you might be confused about which class to you. The rule of thumb is, use the lowest class e.g. if the design you are building is intended for mobile users, tablet and medium desktop users then you should use ‘xs’ class:

Full code:

IF you want to create following layout, use below code:

bootstrap layout example 1

 

Here is the Code:

This layout will be shown on mobile, tablets, and all desktop screen sizes. Now let us split the layout for tablets and bigger screen sizes.  Here is what we want to do:

Layout A

class 1

Layout B

class 2

Code

Note that you need to use the lowest possible class, because it will scale upwards e.g. if you only use ‘md’ class then it will be applicable to both medium as well as larger screen sizes. Whereas, if you use ‘col-lg-*’ class then it will only be applicable to larger screen sizes. On medium and small screen sizes the columns will stack vertically in this case.

Practical Example – Building a Bootstrap Theme

Lets us build the following layout:

Bootstrap Layout example

In the next tutorials, we will be building a complete bootstrap theme using grid. We will also study some complex structures using BS grid like nesting, stacking etc. So stay tuned.

Common Bootstrap Questions and Answers

Question: How would you create a bootstrap grid like this?

bootstrap layout question

Solution:

The above layout is not difficult at all, its just that you will create two rows with required column size, and then add height to each column via CSS , aha 🙂 Lets look at it:

Question . Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap, what is the difference?

Solution:  Default width of the page is 960px (maximum). So if you are using a fixed width container, then your content will not adjust to screen size when it is greater than 960px.

On the other hand, if you use fluid-width layout (container-fluid class), then your content will adapt to all screen sizes.

A fixed width layout will create whitespace on larger screen devices

 

All right, thanks guys for reading out all this stuff, believe me, bootstrap is an amazing thing, I really love it as it makes job 200% easier. Well this is not the end of Bootstrap, we have just covered basics, but with practical example. We will have some more useful tutorials on complicated issues. Till then, take care, enjoy a lot!

Sohail ahmed
About me

Love to train and learn. SEO and development is my profession. 10+ years of IT training, practical experience in SEO. Creativity helps me strategize things well, especially when i code.

Leave a comment

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