Bootstrap Case: Multicolumn Layout


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>

Try it Yourself »


Color Picker

colorpicker