<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-6"> <div class="blockquote-box blockquote-success clearfix"> <div class="square pull-left"> <span class="glyphicon glyphicon-tree-conifer glyphicon-lg"></span> </div> <h4>Spend just £29.99 to get free shipping within the uk</h4> </div> </div> <div class="col-md-6 hidden-xs"> <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> </div> </div>

.glyphicon-lg{font-size:3em} .blockquote-box{border-right:2px 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}