How to use icon box

This is how the basic icon box markup looks like:

<div class="ky__iconbox">
  <div class="ky__iconbox-icon">
    <img src="images/icon1.png" alt="...">
  </div><!--/.ky__iconbox-icon -->
</div><!--/.ky__iconbox -->
<div class="ky__iconbox-content">
  <div class="ky__iconbox-title--wrapper">
    <h3 class="ky__iconbox-title">Responsive &amp; Retina</h3> 
  </div><!--/.ky__iconbox-title-wrapper --> 
  <div class="ky__iconbox-text--wrapper">
    <div class="ky__iconbox-text">
      <p> text </p> 
    </div><!--ky__iconbox-text --> 
  </div><!--/.ky__iconbox-text-wrapper --> 
</div><!--/.ky__iconbox-content -->

The general icon box style can be found in app/css/scss/_general.scss

If you want to use the iconbox without the content, just to display the iconbox icon you can remove the "ky__iconbox-content" div from the above markup.

In order to display these elements on multiple columns you can add use the bootstrap column classes like in the example below:

<div class="col-md-4 col-sm-4">
  <div class="ky__iconbox">[...]</div>
</div>
<div class="col-md-4 col-sm-4">
  <div class="ky__iconbox">[...]</div>
</div>
<div class="col-md-4 col-sm-4">
  <div class="ky__iconbox">[...]</div>
</div>
<div class="col-md-4 col-sm-4">
  <div class="ky__iconbox">[...]</div>
</div>