Bootstrap | Grid System - Medium and Large Device

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial, we are going to be studying Bootstrap grid system - Medium and Large Device.

In our previous tutorial, we discussed about Bootstrap grid - Stacked-to-horizontal. Here we have used two divs and have gave them the 50%/50% split at the medium viewport width -

<div class = "col-md-6">....</div>
<div class = "col-md-6">....</div>

At large viewport width, your designs could really be better as a 33%/66%. So what we are going to do is to set it up to change the column's widths at the breakpoint -

<div class = "col-md-6 col-lg-4">....</div>
<div class = "col-md-6 col-lg-4">....</div>

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

Now Bootstrap will say "at the medium size, i look at classes with md in them and make use of those. At the large size, i look at the classes with the word lg in them and make use of those. In this case, our 2 divs will go from a 50%/50% split and up to a 33%/66%.

Example

Check out the following example below. We have used styling for each column. You can avoid it -

<div class = "container">
   <h1>Hello, world!</h1>
   
   <div class = "row">
   
      <div class = "col-md-6 col-lg-4" 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 that advantage.</p>

         <p>But in order to understand where all this error is born
             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-md-6 col-lg-8" 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 error is born
             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 he is never of that sort
             times fall so that he may seek some great labor and pain
             pleasure.</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

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 Grid System: Mobile, Tablet and Desktops.

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.