<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2> Blockquote Box</h2> <div class="col-md-6"> <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> <div class="col-md-6"> <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}