Visit hosted website for template example
- 12 column responsive grid layout
- Responsive for desktop, tablet and phone
- Horizontal and vertical text align
- Column offset
- Equal row column heights
Prefix all grid columns with .col and specify the number of columns you would like your content to occupy (up to 12). Specify number of columns for small and medium screens (.sm-col & .md-col)
.
Nest .col
classes in a .row
class if the number of columns are less than 12 (to prevent float bubbling).
You may nest your rows and columns within a .container
class which provides padding in desktop view.
Add the .offset
class with the number of cols you would like to offset by from the left.
Use .row .row-eq-height
for equal column heights (Note: only use as needed, will sacrifice ability to set bottom margin and padding of col. Use div wrapper if needing to set these properties).
<div class="container">
<div class="row">
<div class="col sm-col-12 md-col-6 col-3">sm-col-12 md-col-6 col-3</div>
<div class="col sm-col-12 md-col-6 col-3">sm-col-12 md-col-6 col-3 </div>
<div class="col sm-col-12 md-col-6 col-3">sm-col-12 md-col-6 col-3 </div>
<div class="col sm-col-12 md-col-6 col-3">sm-col-12 md-col-6 col-3 </div>
</div>
<div class="row">
<div class="col col-4 offset-4">col-4 offset-4</div>
</div>
<div class="row row-eq-height">
<div class="col col-6">
<p>Lorem ipsum.</p>
</div>
<div class="col col-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, facere quia! Eius ipsa quae eos dolor dolorum optio nesciunt a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
Add div class of .left .right .center .justify
to align text within divs horizontally. For small and medium devices prefix with .sm-left .md-left
etc.
Howie_Burger (2017)