Boostrap

Presentation

Bootstrap is the most popular HTML, CSS, and JS framework

Starting with boostrap

Getting Started

Grid System

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

Bootstrap' grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better

Some Bootstrap grid system rules

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be immediate children of rows
• Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
• Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

grid class

   xs (for phones)
   sm (for tablets)
   md (for desktops)
   lg (for larger desktops)