Content Boxes

Icon Boxes

In this example, the icon-boxes are set up in a 4 column grid system using row-fluid and span3.

First Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Second Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fourth Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="row-fluid">
  <div class="iconbox span3">
    <div class="iconcircle">
      <i class="far fa-lightbulb"></i>
    </div>
    <div class="iconbox-content">
...
</div>
</div>
<div
class="iconbox span3">...</div> <div class="iconbox span3">...</div> <div class="iconbox span3">...</div>

Text Boxes

Some heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<div class="text-box">
  <div class="text-box-heading">Some heading</div>
  <div class="arrow-down"></div>
  <p>Lorem ipsum ...</p>
</div>

Image Boxes

In this example, the icon-boxes are set up in a 3 column grid system using row-fluid and span4.

img1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More

img2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More

img3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More

<div class="row-fluid">
  <div class="image-box span4">
    <img src="..."  class="img-responsive">
    <div class="image-box-content"><p>Lorem ipsum ...</p></div>
  </div>
  <div class="image-box span4">
    ...
  </div>
  <div class="image-box span4">
    ...
  </div>
</div>