About Bootstrap Grid System

Confusing about bootstrap grid system

If your are using Bootstrap Framework then you don't need to use Responsive Grid System.

Bootstrap will make your site fully responsive with all browser and device compatibility.

This is simple flow of Bootstrap HTML structure.

<div class="container">
<!-- Your main wrapper -->
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<!-- one half section -->
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<!-- one half section -->
</div>
</div>
</div>



col-lg -- Large devices Desktops (≥1200px)



col-md -- Medium devices Desktops (≥992px)



col-sm -- Small devices Tablets (≥768px)



col-xs -- Extra small devices Phones (<768px)



For more information about Bootstrap Grid Visit : Bootstrap


Notice -- For this kind of structure you can make design using only 2 class, All classes are not needed for that.

Like use this one -- class="col-md-6 col-xs-12"

instead of -- class="col-lg-6 col-md-6 col-sm-6 col-xs-12"

Bootstrap 5 grid system

Use this code

<style>
.blue {
background-color: blue !important;
}

.grey {
background-color: grey;
}

.black {
background-color: black;
}

div {
height: 50px;
}

.double {
height: 100px !important;
}
</style>

<div class="container">
<div class="row">
<div class="col-5">
<div class="col-12">
<div class="row">
<div class="col-12 black double">
A
</div>
<div class="col-6 grey">
A
</div>
<div class="col-6 blue">
B
</div>
</div>

</div>
</div>
<div class="col-7">
<div class="row">
<div class="col-4 blue">
A
</div>
<div class="col-4 black">
B
</div>
<div class="col-4 blue">
C
</div>

</div>
<div class="row">
<div class="col-8 double">
<div class="row">
<div class="col-12 grey">
A
</div>
<div class="col-6 black">
B
</div>
<div class="col-6 blue">
A
</div>
</div>
</div>
<div class="col-4 black double">
B
</div>
</div>

</div>
</div>

</div>

Understanding bootstrap grid system classes

I don't think you understand the idea of Bootstrap3 at the first place.

They say: Bootstrap is "Mobile First", this means, the classes of the smaller screen devices are in the higher priority, so they will be used to display first if exist. In case there is no definition for the current screen size, or any definition for a smaller screen, the col will be stacked on each other, in other word, they are all became col-xs-12.

Let make it specific:

-You have your <div class="row"></div> with several column inside:

<div class="container">
<div class="row" style="color: white;">
<div class="row" style="color: white;">
<div class="col-md-6 col-sm-9" style="background: red;">.col-md-6 .col-sm-9</div>
<div class="col-md-6 col-sm-3" style="background: green;">.col-md-6 .col-sm-3</div>
</div>
</div>

To understand this, suppose we have 4 different devices opening the website containing the code above:

  • Phone (Extra small devices): devices with screen width <768px. These go with class .col-xs-#. Bootstrap will look up to see if there is an definition for the screen sizes which is equal or smaller than the current screen size. Here we don't have it, just .col-sm-# and .col-md-#, which are belong to a bigger screen sizes, and no class of a equal or smaller screen size. In this case, Bootstrap will process the default behavior to ensure that anyway this will be displayed nicely; so it make all the div stacked on each other, or in other words, it makes them all become .col-xs-12. Like this:
    Sample Image
  • Tablet (Small devices): devices with screen size >=768px and <992px. These go with class .col-sm-#. Now Bootstrap finds there are definition of .col-md-6. It just display it as it's defined:
    Sample Image

  • Desktop (Medium Devices): devices with screen size >=992px and <1200px. These go with class .col-md-#. This case is the same with the previous case, where Bootstrap find .col-md-# and display as it is:
    Sample Image

  • Desktop (Large Devices): devices with screen size >=1200px. These go with class .col-lg-#. This case, Bootstrap finds now class like .col-lg-#. Now it climbs down the stair to the smaller screen size devices to get the definition of of smaller devices. In this case, .col-md-# is the one closest to the .col-lg-#, so it will come in place. So we got the same result the same as the case of the medium devices:
    Sample Image

After all, we we should remember that smaller screen size classes will have higher priority. You don't have to defined all class for a div but only some that you think they are important and suitable for your purpose of display.

For your question, the answer is YES. You can only define .col-lg-# for your website. But when user view it on a phone or tablet or small desktop, all the elements will be stacked on each other.

In bootstrap should I use grid system with row and col for all content within container

There is no right or wrong in this as long as the bottom code snippet conforms with the style guidelines of the rest of the project.

In general, bootstrap is a tool that is supposed to make your life easier. The only thing row and col do is create a wrapper of the flexbox model, so you have to write less CSS.

Here is one thing to consider though:

Not using row and col, every time you want to create a flex layout, means that whenever you try to make general layout changes to your whole project it can cause issues.

Let's say you change your bootstrap breakpoints in your theme, your rows and col will adapt just fine, but any other layout will have to be touched separately.

Since I assume all the elements in your latter example are 100% width this won't be an issue for you.

What would I do?

Not that it really matters what I would do, but I would just use rows/cols every time it is viable, I just like consistency in my code.



Related Topics



Leave a reply



Submit