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