Bootstrap | Grid System - Stacked-to-horizontal

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial guide, we will be studying about Bootstrap Grid System - Stacked-to-horizontal.

Example

Let's see a simple grid example with simple layout of two columns, two paragraphs per column. Here 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"  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" 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.

Details of above code

• <div class = "container">.....</div> element is added to ensure proper centering and maximum width for layout.

• Soon as a container is added, next you need to think in terms of rows. Add <div class = "rows">.....</div> and columns <div class = "col-md-6">.....</div> inside the rows.

• Every row in the grid consists of 12 units and you can define the desired size of your columns making use of those units. In our example we have two columns each made of 6 units wide i.e 6 + 6 = 12.

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: Medium and Large Device.

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.