Bootstrap | Grid System - Mobile, Tablet and Desktops

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial, we are will be discussing about Bootstrap Grid System Mobile, Tablet and Desktops.

In our last tutorial post, we discussed about Grid System Medium and Large. Now let us take it to a new level, where we would want to change it for the extra small phone size as well. Let's say we want to add the option for columns to be split 75%/25% for tablets, we do it this way -

<div class = "col-sm-3 col-md-6 col-lg-4">....</div>
<div class = "col-sm-9 col-md-6 col-lg-8">....</div>

READ: Bootstrap | Grid System - Medium and Large Device

Now this gives us 3 various column layouts at each point. On a phone, it will be 75% on the left, and 25% on the right. On a tablet, it will be 50%/50%, and on a large viewport, it will be 33%/66%. Three different layouts for each of the three responsive sizes.

Example

Check out the following example. Here we have made use of styling for each column -

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">
      <div class = "col-sm-3 col-md-6 col-lg-8" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>The pain itself is fun, the main iterative process, but do
             such times as low as fatigue and obesity  Ut
             For more information on how to do our school district employment
             but to achieve the objectives from it.</p>

         <p>But in order to understand where all this born error is pleasure
             accusing and praising the pain, I will open the whole thing, and with it
             which is from him the inventor of the truth and as it were the architect of the happy life
             they will explain what has been said.</p>
      </div>

      <div class = "col-sm-9 col-md-6 col-lg-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>But in order to understand where all this born error is pleasure
             accusing and suffering.</p>

         <p>Nor is there any one who loves pain because it is pain itself
             hey, he wants to win, but because there will never be times of that sort
             they fall in order that he may seek some great pleasure by toil and pain.</p>
      </div>
      
   </div>
</div>

Output

When the above example is executed, it will produce the following result -

Hello, world!

The pain itself is important, but I give it to the pain of some great pain. In order for the least to come, what of ours to exercise any school of labor except to take advantage of the objectives from it to achieve.

But in order that you may understand whence every born error is the pleasure of accusing and praising the pain, I will open the whole matter, and will explain the very things which were said by that inventor of the truth and, as it were, the architect of the blessed life.

But that you may perceive from which all this error is born the pleasure of the accusers and the pain of those who praise them.

Moreover, there is no one who desires to obtain pain itself because pain is important, enhanced, but because times of such a nature do not occur so that by toil and pain he may seek some great pleasure.

READ: Bootstrap | Grid System - Stacked-to-horizontal

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap CSS Overview.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.