[ad_1]
https://i.ytimg.com/vi/lAh2uPzoGyg/hqdefault.jpg

how to use bootstrap grid classes
bootstrap 3 column classes
bootstrap grid system classes
bootstrap’s predefined grid classes
twitter bootstrap grid classes
twitter bootstrap column classes
col-sm-6 col-md-4 col-lg-2

In this video we will discuss Bootstrap 3 grid classes and their use.

Grid classes for a given screen size apply to that screen size and larger unless another declaration overrides it. Let us understand what we mean by this statement with an example.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

For example, we want four equal columns on both medium and large devices.

For medium devices the class that we use is col-md-*. Since we want 4 equal columns, we would use four col-md-4 columns as shown below. So with the following HTML we get four equal columns on both medium and large devices. This is because col-md-* class is applied to both medum and large deives as we have not used col-lg-*.

[div class=”container”]
[div class=”row”]
[div class=”col-md-3″]
[div class=”customDiv”]Column 1[/div]
[/div]
[div class=”col-md-3″]
[div class=”customDiv”]Column 2[/div]
[/div]
[div class=”col-md-3″]
[div class=”customDiv”]Column 3[/div]
[/div]
[div class=”col-md-3″]
[div class=”customDiv”]Column 4[/div]
[/div]
[/div]
[/div]

If you want, you can change this on a large device by using col-lg-* class along with col-md-* class. Let us say on a large deive we want just 2 columns in every row with 3:1 ratio.

// bootstrap 3 grid classes example.png

To achieve this we would modify our HTML as shown below. So with these 2 classes in places we get 4 equal columns on a medium device and 2 columns with 3:1 ratio on a large device.

[div class=”container”]
[div class=”row”]
[div class=”col-md-3 col-lg-9″]
[div class=”customDiv”]Column 1[/div]
[/div]
[div class=”col-md-3 col-lg-3″]
[div class=”customDiv”]Column 2[/div]
[/div]
[div class=”col-md-3 col-lg-9″]
[div class=”customDiv”]Column 3[/div]
[/div]
[div class=”col-md-3 col-lg-3″]
[div class=”customDiv”]Column 4[/div]
[/div]
[/div]
[/div]

However, on a small device notice the columns are stacked on top of each other with each column spanning across the 12 column grid system. If you want you can change this default behaviour using col-sm-* class. Let us say on a small device we want 2 equal columns in every row.

// bootstrap 3 column classes example.png

To achieve this we would modify our HTML as shown below. So with these 3 classes in places we get 4 equal columns on a medium device, 2 columns with 3:1 ratio on a large device and 2 equal columns on a small device.

[div class=”container”]
[div class=”row”]
[div class=”col-md-3 col-lg-9 col-sm-6″]
[div class=”customDiv”]Column 1[/div]
[/div]
[div class=”col-md-3 col-lg-3 col-sm-6″]
[div class=”customDiv”]Column 2[/div]
[/div]
[div class=”col-md-3 col-lg-9 col-sm-6″]
[div class=”customDiv”]Column 3[/div]
[/div]
[div class=”col-md-3 col-lg-3 col-sm-6″]
[div class=”customDiv”]Column 4[/div]
[/div]
[/div]
[/div]

On an extra small device, the columns are stacked on top of each other with each column spanning across the 12 column grid system. If you want you can change this default behaviour very easily using col-xs-* class.

Now, if you remove all the grid classes except col-sm-6. In other words if we modify the code as shown below, we get 2 eqaul columns on small, medium and large devices. This is because grid classes for a given screen size apply to that screen size and larger unless another declaration overrides it.

[div class=”container”]
[div class=”row”]
[div class=”col-sm-6″]
[div class=”customDiv”]Column 1[/div]
[/div]
[div class=”col-sm-6″]
[div class=”customDiv”]Column 2[/div]
[/div]
[div class=”col-sm-6″]
[div class=”customDiv”]Column 3[/div]
[/div]
[div class=”col-sm-6″]
[div class=”customDiv”]Column 4[/div]
[/div]
[/div]
[/div]

By now I believe you have understood the use of these grid classes. With these classes, you have complete control over the layout of your website on different screen sizes.

Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2016/05/bootstrap-3-grid-classes_17.html

Original source