bootstrap 4
Responsive website designing
how to start with Bootstrap 4
bootstrap4 tutorials for beginners
explaining how bootstrap Grid system works
bootstrap 4 grid example
bootstrap 4 grid system
bootstrap grid system example
bootstrap 4 page layout
how to use bootstrap 4 grid system

Device category (screen size) with bootstrap syntax
xs (for phones – screens less than 768px wide)
sm (for tablets – screens equal to or greater than 768px wide)
md (for small laptops – screens equal to or greater than 992px wide)
lg (for laptops and desktops – screens equal to or greater than 1200px wide)

In this video we will discuss, How to create responsive websites using bootstrap 4 grid system.

One of the very important concept that we need to understand in Bootstrap is it’s Grid System. The Grid system is used for creating page layouts through a series of rows and columns. The Grid System consists of 12 columns. This grid system is so flexible that you can create any page layout that you want.

Let us now see how to create a 3 column layout using the Bootstrap Grid System.

The page should be divided into 3 columns with 1:4:1 ratio. One important thing to keep in mind here is that, if we add the 3 numbers in the ratio (1:4:1), the sum should be equal to 12, because the bootstrap grid system consists of 12 columns. This means if the LEFT SIDE BAR column is 2 units, the MAIN CONTENT AREA column should be 8 units and the RIGHT SIDE BAR column should be 2 units. So when we add these 3 numbers (2 Units + 8 Units + 2 Units), we get 12 units.

Bootstrap includes several grid classes for creating layouts for different devices like mobile phones, tablets, laptops, desktops, etc. The table below shows the available bootstrap grid classes that you can use to create grid column layouts ranging from extra small devices like mobile phones to large devices like large desktop screens.

We will discuss these different classes in detail with examples in a later video. For now let’s use .col-md-* class to create a 3 column layout.

There are 3 simple steps to create the 3 column layout that we want, using the bootstrap 12 column grid system
1. First, create a container. We do this by creating a [div] element using the bootstrap .container class. All the rows will be within this container.
2. Second, create a row within the container. We do this by creating a [div] element using the bootstrap .row class.
3. Finally within the row we create the 3 columns that we need. We do this by creating [div] elements using any of the bootstrap grid classes (.col-xs-*, .col-sm-*, .col-md-* & .col-lg-*). In this example we are using col-xs-* class.

Some important points to keep in mind when working with the bootstrap grid system to create page layouts
1. Rows must be placed within a container for proper alignment and padding.
2. Use rows to create horizontal groups of columns.
3. Content should be placed within columns, and only columns may be immediate children of rows.
4. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
5. Grid columns are created by specifying the number of twelve available columns you wish to span. For example, to create four equal columns we would use four .col-xs-3.

Link For Bootstrap 4 CDN :

thank you guys for watching my videos and visiting my channel
please do subscribe my YouTube channel

see you with a new tutorial.


If you are looking to make money from running your own business at home, visit the links below.

Computers and Software Buyers Guide

Compare Computers and Laptops

Mobile Phones Buyers Guide

Compare Mobile Phones

Game Console Buying Guide

Compare Game Consoles

Tech Shop Offers