Understanding Grid in Bootstrap

Before started:

You must have knowledge adding bootstrap file in HTML head

Used:

Bootstrap 4

Definition

Bootstrap’s grid system is built with flexbox and allows up to 12 columns across the page.

Example:

I want to make three column like image below:

Question:

How to make it … ?

Answer:

in website we will make 3 column, so 12 grid / 3 = 4

in mobile phone the column will responsive so we will use col-sm

So we we will use col-sm-4

Create HTML File

Create grid_col.html and add this code:

<div class="container">
<br />
<div class="row">
  <div class="col-sm-4" style="background-color:lavender;">  
  <h4>Web Security</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
		  </div>
  <div class="col-sm-4" style="background-color:orange;">
  <h4 >E-Commerce</h4>
          <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
		  </div>
  <div class="col-sm-4" style="background-color:lavender;">
  <h4 >Responsive Design</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
  </div>
</div>
</div>

Explain:

  • col-sm-4, this code means use 4 grid column starting in small screen and scaling to large screen
  • 4 grid column / 12 grid column = 1/3 website width
  • sm means it will responsive in small screen, the column will re-arrange automatically

Thanks for reading

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *