<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> <div class="container"> <div class="row"> <aside class="col-sm-4"> <div class="iconbox"> <div class="icon-wrap"><i class="fa fa-check"></i></div> <div class="text-wrap"> <h5>This is heading</h5> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> <aside class="col-sm-4"> <div class="iconbox"> <div class="icon-wrap"><i class="fa fa-check"></i></div> <div class="text-wrap"> <h5>This is heading</h5> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> <aside class="col-sm-4"> <div class="iconbox"> <div class="icon-wrap"><i class="fa fa-check"></i></div> <div class="text-wrap"> <h5>This is heading</h5> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> </div> <!--row.//--> <br> <div class="row"> <aside class="col-sm-4"> <div class="iconbox"> <div class="icon-wrap"><i class="fa fa-check"></i></div> <div class="text-wrap"> <h5>This is a heading</h5> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> <aside class="col-sm-4"> <div class="iconbox"> <div class="icon-wrap"><i class="fa fa-check"></i></div> <div class="text-wrap"> <h5>This is a heading</h5> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> <aside class="col-sm-4"> <div class="iconbox"> <div class="icon-wrap"><i class="fa fa-check"></i></div> <div class="text-wrap"> <h5>This is a heading</h5> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> </div> <!--row.//--> <br> <div class="row"> <aside class="col-sm-4"> <div class="iconbox"> <div class="icon-wrap"><i class="fa fa-check"></i></div> <div class="text-wrap"> <h5>This is heading</h5> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> <aside class="col-sm-4"> <div class="iconbox"> <div class="icon-wrap"><i class="fa fa-check"></i></div> <div class="text-wrap"> <h5>This is heading</h5> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> <aside class="col-sm-4"> <div class="iconbox"> <div class="icon-wrap"><i class="fa fa-check"></i></div> <div class="text-wrap"> <h5>This is heading</h5> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> </div> <!--row.//--> </div> <!--container end.//-->

.iconbox { padding: 10px; display: inline-flex; } .text-wrap h5 { padding-top: 4px; font-size: 22px; text-transform: uppercase; } .icon-wrap { padding: 4px; border: 1px solid #4A7BBC; border-radius: 50%; margin-right: 15px; text-align:center; } .icon-wrap i { color: #4A7BBC; padding: 6px 6px 6px 6px; }