html - CSS layout items with bootstrap -

i trying lay items, in end following (black lines there show made out of 3 blocks):

i have tried quite bunch of things. example have tried use panel class 2 right items worked charm; problem icon...i not make div element fill 100% of height , icon aligned top.

another problem have encountered was, not figure out how setup grid layout when have more items. in end trying have in row:

as can see (i apologize such small picture) have 3 groups of these items in row, have aligned right. when started playing grid system, either not fit 3 elements row (not mentioning vertical alignment of icon), text not fitting properly.

any in matter more appreciated.

---

in opinion, example gave in beginning coded differently how have shown towards bottom.

you can use "clearfix" or "clear float" remove spacing in between grid items or prevent weird wrapping. in first example, hid other 2 columns can see line have specified in first example.

example of grid spacing:

<style> [class*="col-"] {     background-color: rgba(86, 61, 124, 0.15);     border: 1px solid rgba(86, 61, 124, 0.2);     padding-bottom: 15px;     padding-top: 15px; } h1{     text-align: center; } </style>  <div class="container">     <div class="row clearfix">         <div class="col-xs-6 col-sm-3" style="height: 150px;">             .col-xs-6 .col-sm-3             <br>             resize viewport or check out on phone example.         </div>         <div class="col-xs-6 col-sm-3" style="margin-top: 22px;margin-bottom: -40px;">.col-xs-6 .col-sm-3</div>         <div class="col-xs-6 col-sm-3" style="visibility: hidden">.col-xs-6 .col-sm-3</div>          <div class="clearfix visible-xs"></div>         <div class="col-xs-6 col-sm-3" style="visibility: hidden">.col-xs-6 .col-sm-3</div>          <div class="col-xs-6 col-sm-3" style="margin-top: 22px;">.col-xs-6 .col-sm-3</div>     </div> </div>  

for second example picture, end solution, don't line second box. it's different element on it's own line. this:

== grid solution w/multiple css elements ==

custom css

<style> .margin-bottom-5, .margin-bottom-10, .margin-bottom-15, .margin-bottom-20, .margin-bottom-25, .margin-bottom-30, .margin-bottom-35, .margin-bottom-40, .margin-bottom-45, .margin-bottom-50, .margin-bottom-55, .margin-bottom-60, .margin-bottom-100 {     clear: both; } * {     border-radius: 0; } .content-boxes-in-v4 {     overflow: hidden;     padding: 0 10px; } .content-boxes-v4 h2 {     color: #555;     font-size: 16px;     font-weight: bold;     text-transform: uppercase;     margin-top: -10px;     margin-bottom: 0px; } .content-boxes-v4 h3{     color: #72c02c;     font-size: 14px;     font-weight: bold;     text-transform: uppercase;     text-align: right;     margin-top: 0px;  } .content-boxes-v4 {     color: #72c02c;     font-size: 11px;     font-weight: bold;     text-transform: uppercase; } .box{     margin-top: 50px;     width: 900px;     margin-left: auto;     margin-right: auto;  } .icon-lrg{     align: left;     font-size: 26px;     vertical-align: middle;     text-align: left;     margin-right: 5px;     margin-top: 15px;     color: #72c02c; } </style> 

html

<div class="box">    <div class="row content-boxes-v4 content-boxes-v4-sm margin-bottom-30">      <div class="col-md-4 md-margin-bottom-40">        <span class="pull-left glyphicon glyphicon-tags icon-lrg"></span>        <div class="content-boxes-in-v4">        <h3>70,423</h3>        <h2># of orders processed individual owners</h2>        <a href="#">learn more</a>      </div>    </div>    <div class="col-md-4 md-margin-bottom-40">      <span class="pull-left glyphicon glyphicon-time icon-lrg"></span>      <div class="content-boxes-in-v4">        <h3>128,444</h3>        <h2># of orders received amazon fulfillment</h2>        <a href="#">learn more</a>      </div>    </div>    <div class="col-md-4 md-margin-bottom-40">      <span class="pull-left glyphicon glyphicon-shopping-cart icon-lrg">      </span>      <div class="content-boxes-in-v4">      <h3>123,423</h3>      <h2># of orders shipped ebay member stores</h2>      <a href="#">learn more</a>    </div>  </div> </div> </div> 

edit: if want make responsive , not have wider screen size, add section below css or style tag.

responsive css

@media screen , (max-width: 1100px){     .col-md-4{         width: 100%;         max-width: 500px;         margin-left: auto;         margin-right: auto;     }     .box {         padding-left: 10px;         padding-right: 10px;         width: 100%;         margin-left: auto;         margin-right: auto;         align: center;     }     .content-boxes-in-v4 {         max-width: 800px;         text-align:       } }