<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="blockquote-box clearfix"> <div class="square pull-left"> <img src="http://placehold.it/60/8e44ad/FFF&text=B" alt="" class="" /> </div> <h4> Bootsnipp</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p> </div> <div class="blockquote-box blockquote-primary clearfix"> <div class="square pull-left"> <span class="glyphicon glyphicon-music glyphicon-lg"></span> </div> <h4> Let's music play</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. <a href="http://www.jquery2dotnet.com/search/label/jquery">jquery2dotnet</a> </p> </div> <div class="blockquote-box blockquote-success clearfix"> <div class="square pull-left"> <span class="glyphicon glyphicon-tree-conifer glyphicon-lg"></span> </div> <h4> Tree conifer</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p> </div> <div class="blockquote-box blockquote-info clearfix"> <div class="square pull-left"> <span class="glyphicon glyphicon-info-sign glyphicon-lg"></span> </div> <h4> Information</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p> </div> <div class="blockquote-box blockquote-warning clearfix"> <div class="square pull-left"> <span class="glyphicon glyphicon-warning-sign glyphicon-lg"></span> </div> <h4> Warning</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p> </div> <div class="blockquote-box blockquote-danger clearfix"> <div class="square pull-left"> <span class="glyphicon glyphicon-record glyphicon-lg"></span> </div> <h4> Danger</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p> </div> </div> </div> </div>

.glyphicon-lg { font-size:3em; } .blockquote-box { border-right:5px solid #E6E6E6;margin-bottom:25px; } .blockquote-box .square { width:100px;min-height:50px;margin-right:22px;text-align:center!important;background-color:#E6E6E6;padding:20px 0; } .blockquote-box.blockquote-primary { border-color:#357EBD; } .blockquote-box.blockquote-primary .square { background-color:#428BCA;color:#FFF; } .blockquote-box.blockquote-success { border-color:#4CAE4C; } .blockquote-box.blockquote-success .square { background-color:#5CB85C;color:#FFF; } .blockquote-box.blockquote-info { border-color:#46B8DA; } .blockquote-box.blockquote-info .square { background-color:#5BC0DE;color:#FFF; } .blockquote-box.blockquote-warning { border-color:#EEA236; } .blockquote-box.blockquote-warning .square { background-color:#F0AD4E;color:#FFF; } .blockquote-box.blockquote-danger { border-color:#D43F3A; } .blockquote-box.blockquote-danger .square { background-color:#D9534F;color:#FFF; }