<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"> <br> <p class="text-center"> <a href="http://bootstrap-ecommerce.com/">UI kit - Bootstrap-ecommerce.com</a></p> <div class="container"> <h3>Flexbox based iconbox - basic</h3> <hr> <div class="row"> <aside class="col-sm-4"> <div class="iconbox"> <div class="icon-wrap"><i class="fa fa-truck"></i></div> <div class="text-wrap"> <h5>This is heading of iconbox</h5> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam quod ab, recusandae dolores</p> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> <aside class="col-sm-4"> <div class="iconbox"> <div class="icon-wrap"><i class="fa fa-file"></i></div> <div class="text-wrap"> <h5>This is heading of iconbox</h5> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam quod ab, recusandae dolores</p> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> <aside class="col-sm-4"> <div class="iconbox"> <div class="icon-wrap"><i class="fa fa-user"></i></div> <div class="text-wrap"> <h5>This is heading of iconbox</h5> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam quod ab, recusandae dolores</p> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> </div> <!--row.//--> <br><br> <h3>Flexbox based iconbox - centered and equal height</h3> <hr> <div class="row"> <aside class="col-sm-4"> <div class="iconbox align-items-center h-100"> <div class="icon-wrap"><i class="fa fa-truck"></i></div> <div class="text-wrap"> <h5>This is heading of iconbox</h5> <p> All centered... Lorem ipsum dolor sit amet consectetur</p> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> <aside class="col-sm-4"> <div class="iconbox h-100"> <div class="icon-wrap align-self-center"><i class="fa fa-file"></i></div> <div class="text-wrap"> <h5>This is heading of iconbox</h5> <p> Centered only icon... Lorem ipsum dolor sit amet consectetur</p> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> <aside class="col-sm-4"> <div class="iconbox h-100"> <div class="icon-wrap align-self-start"><i class="fa fa-user"></i></div> <div class="text-wrap"> <h5>This is heading of iconbox</h5> <p> Aligned top... Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam quod ab, recusandae dolores</p> </div> <!-- text-wrap.// --> </div> <!-- iconbox.// --> </aside> </div> <!--row.//--> </div> <!--container end.//--> <br><br><br> <hr> <article class="bg-secondary mb-3"> <div class="card-body text-center"> <h4 class="text-white">HTML UI KIT <br> Ready to use Bootstrap 4 components and templates </h4> <p class="h5 text-white"> for Ecommerce, marketplace, booking websites and product landing pages</p> <br> <p><a class="btn btn-warning" target="_blank" href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com <i class="fa fa-window-restore "></i></a></p> </div> <br><br><br> </article>

.iconbox { padding: 20px; border: 1px solid #555; display: inline-flex; } .iconbox p { margin-bottom: 0; } .icon-wrap { background: #eee; padding: 7px; margin-right: 15px; text-align:center; } .icon-wrap i { font-size: 2.5rem; width:3rem; }