Bootstrap Case: Multicolumn Layout Tags

Multicolumn Layout

With Bootstrap it is easy to create a multicolumn layout.

Bootstrap provides a responsive, mobile-first 12-column grid system.

The columns will rearrange themselves when viewed on different screen sizes.

Some grid rules:

Start with a container (<div class="container">)
Create a row inside it with <div class="row">
Use predefined classes like .col-md-4, .col-md-6, etc. to quickly make grid columns
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-md-4 columns
The numbers in the .col-*-* classes should always add up to 12 for each row
Content is placed inside the grid columns

The following example shows how to create four columns of equal width:

Example

<div class="row">
  <div class="col-md-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col-md-3"> 
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.</p>
  </div>
  <div class="col-md-3"> 
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam.</p>
  </div>
  <div class="col-md-3"> 
    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.</p>
  </div>
</div>

Try it Yourself »

Columns With Different Widths

Now we wish to create columns of different widths.

The following example creates a three-column layout where the column in the middle is wider than the first and last column:

Example

 <div class="row">
  <div class="col-md-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col-md-6"> 
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam.</p>
  </div>
  <div class="col-md-3"> 
    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.</p>
  </div>
</div>