Introduction to BootStrap 3

The Bootstrap grid dsystem is a way to position different elements in a web page. To accomplish this, a set of different classes for different sized devices. The Bootstrap grid system divides sections in 12 equal width columns. There are short names for different devices.

• sm
• md
• lg
• xl

All these names are prefixed by the text : col- All these names are suffixed by the number of divisions it will take out of the total 12 divisions. Note: t Example: To make a section with an iimage on the left spanning 4 divisions, a paragraph in the middle spannihg 3 divisions and some text spanning 5 divisions, we must write the folowing markup:

  
<div class="row">
  <div class="col-lg-4">
    <img src="example.jpg" alt="some text" />
  </div>
  <div class="col-lg-3">
    <p>Some paragraph</p>
  </div>
  <div class="col-lg-5">
    <div>Some text</div>
  </div>
</div>
  





Sample output for the above code is:


 

  
  

  
   
  
  

    
Some paragraph
  
  

  

  Some text