Boxes
Content boxes built within Bootstraps 12 column grid. You have simple bordered content boxes and you also have 6 other options as far as colors.
- You can use bordered icons or regular icons. Simply replace the
.bordered-icon-*classes inside of the icon span with a size class.fa-5xfor example. - To change a bordered icon to color (inverted) simply add the class
.bordered-icon-colorinside of thespantag your icon is in. - To use square bordered icons instead of circles add class
.no-border-radiusinside of thespantag your icon is in. - To create a bordered content section simply wrap content inside of a column within a
divwith the classclass="content-box content-box-bordered". - They are built within the GRID, put whatever you want inside of them and there is 6 color options!
The icons inside of the content boxes are very flexible, check out the Raleway Icon Options.
2 Column Bordered
We do parallax.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Nam bibendum in mauris at sollicitudin lacinia.
We do animations.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Nam bibendum in mauris at sollicitudin lacinia.
<!--=== Content 1 ===--> <div class="col-sm-6 text-center"> <div class="content-box content-box-bordered"> <span class="ion-beaker bordered-icon-lg"></span> <h4 class="pt15">We do parallax.</h4> <p class="no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Nam bibendum in mauris at sollicitudin lacinia.</p> </div> </div> <!--=== Content 2 ===--> <div class="col-sm-6 text-center"> <div class="content-box content-box-bordered"> <span class="ion-beer bordered-icon-lg"></span> <h4 class="pt15">We do animations.</h4> <p class="no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Nam bibendum in mauris at sollicitudin lacinia.</p> </div> </div>
3 Column Bordered
We do parallax.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.
We do animations.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.
We do responsive.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.
<!--=== Content 1 ===--> <div class="col-sm-4 text-center"> <div class="content-box content-box-bordered"> <span class="ion-beaker bordered-icon-lg"></span> <h4 class="pt15">We do parallax.</h4> <p class="no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.</p> </div> </div> <!--=== Content 2 ===--> <div class="col-sm-4 text-center"> <div class="content-box content-box-bordered"> <span class="ion-beer bordered-icon-lg"></span> <h4 class="pt15">We do animations.</h4> <p class="no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.</p> </div> </div> <!--=== Content 3 ===--> <div class="col-sm-4 text-center"> <div class="content-box content-box-bordered"> <span class="ion-help-buoy bordered-icon-lg"></span> <h4 class="pt15">We do responsive.</h4> <p class="no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.</p> </div> </div>
4 Column Bordered
We do parallax.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.
We do animations.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.
We do responsive.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.
We help you.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.
<!--=== Content 1 ===--> <div class="col-sm-3 text-center"> <div class="content-box content-box-bordered"> <span class="ion-beaker bordered-icon-lg"></span> <h4 class="pt15">We do parallax.</h4> <p class="no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p> </div> </div> <!--=== Content 2 ===--> <div class="col-sm-3 text-center"> <div class="content-box content-box-bordered"> <span class="ion-beer bordered-icon-lg"></span> <h4 class="pt15">We do animations.</h4> <p class="no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p> </div> </div> <!--=== Content 3 ===--> <div class="col-sm-3 text-center"> <div class="content-box content-box-bordered"> <span class="ion-help-buoy bordered-icon-lg"></span> <h4 class="pt15">We do responsive.</h4> <p class="no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p> </div> </div> <!--=== Content 4 ===--> <div class="col-sm-3 text-center"> <div class="content-box content-box-bordered"> <span class="ion-help bordered-icon-lg"></span> <h4 class="pt15">We help you.</h4> <p class="no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p> </div> </div>
4 Column Bordered
Default
Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
Primary
Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
Success
Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
Info
Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
Warning
Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
Danger
Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
<!--=== Content Default ===--> <div class="col-sm-2 text-center text-white"> <div class="content-box content-box-default"> <span class="ion-beaker bordered-icon-static-lg"></span> <h4 class="pt15 text-white">Default</h4> <p class="p15xs no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit.</p> </div> </div> <!--=== Content Primary ===--> <div class="col-sm-2 text-center text-white"> <div class="content-box content-box-primary"> <span class="ion-beaker bordered-icon-static-sm"></span> <h4 class="pt15 text-white">Primary</h4> <p class="p15xs no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit.</p> </div> </div> <!--=== Content Success ===--> <div class="col-sm-2 text-center text-white"> <div class="content-box content-box-success"> <span class="ion-beaker bordered-icon-static-xs"></span> <h4 class="pt15 text-white">Success</h4> <p class="p15xs no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit.</p> </div> </div> <!--=== Content Info ===--> <div class="col-sm-2 text-center text-white"> <div class="content-box content-box-info"> <span class="ion-beaker bordered-icon-static-lg"></span> <h4 class="pt15 text-white">Info</h4> <p class="p15xs no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit.</p> </div> </div> <!--=== Content Warning ===--> <div class="col-sm-2 text-center text-white"> <div class="content-box content-box-warning"> <span class="ion-beaker bordered-icon-static-sm"></span> <h4 class="pt15 text-white">Warning</h4> <p class="p15xs no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit.</p> </div> </div> <!--=== Content Danger ===--> <div class="col-sm-2 text-center text-white"> <div class="content-box content-box-danger"> <span class="ion-beaker bordered-icon-static-xs"></span> <h4 class="pt15 text-white">Danger</h4> <p class="p15xs no-margin">Lorem ipsum dolor sit amet, consec tetur adipiscing elit.</p> </div> </div>