"box"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mawk_khan/pen/LNPyrg?depth=everything&order=popularity&page=32&q=icon+box&show_forks=false" /> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Poppins:400,600,700,500); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800); .container { max-width: 1200px !important; margin: 80px 0; padding-bottom:100px; font-family: "Open Sans"; } .container { box-sizing: border-box; margin-left: auto !important; margin-right: auto !important; } /*-=-=-=-=-=-=-=-=-=-*/ /* Column Grids */ /*-=-=-=-=-=-=-=-=-= */ .col_half { width: 49%; } .col_third { width: 32%; } .col_fourth { width: 23.5%; } .col_fifth { width: 18.4%; } .col_sixth { width: 15%; } .col_three_fourth { width: 74.5%;} .col_twothird{ width: 66%;} .col_half, .col_third, .col_twothird, .col_fourth, .col_three_fourth, .col_fifth{ position: relative; display:inline; display: inline-block; float: left; margin-right: 2%; margin-bottom: 20px; } .end { margin-right: 0 !important; } .text-center {text-align: center !important;} /*-=-=-=-=-=-=-=-=-=-*/ /* Style */ /*-=-=-=-=-=-=-=-=-= */ .at-icon-box { position:relative; padding: 37px 20px; } .at-icon-box .at-icon-box-icon { color: #002e5b; margin: 0 0 8px; vertical-align: bottom; } .at-icon-box.at-icon-left .at-icon-box-icon { float: left; } .at-icon-box.at-icon-right .at-icon-box-icon { float: right; } .at-icon-box.at-icon-right {text-align:right;} .at-icon-box.at-icon-left .at-icon-text, .at-icon-box.at-icon-right .at-icon-text{ overflow: hidden; } .at-icon-box.at-icon-left h5, .at-icon-box.at-icon-right h5 { color: #002e5b; font-size: 18px; font-weight: 700; font-family: Poppins; padding-top: 0; margin-top: 0; line-height: 22px; letter-spacing:-1px } .at-icon-box.at-icon-left p, .at-icon-box.at-icon-right p { font-size: 13px; line-height: 18px; } .at-icon-box .at-icon-box-icon i { background: #002e5b none repeat scroll 0 0; border-radius: 50%; color: #fff; display: block; height: 50px; line-height: 50px; text-align: center; vertical-align: middle; width: 50px; } .at-icon-box .at-icon-box-icon::after { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .at-icon-box:hover { background: #f6f6f6 none repeat scroll 0 0; } .at-icon-box:hover .at-icon-box-icon { padding: 20px 0; } .at-icon-box:hover .at-icon-box-icon::before { height: 15px; } .at-icon-box:hover .at-icon-box-icon::after { height: 15px; } .at-icon-box h5 { margin-bottom: 11px; } .at-icon-box .at-icon-text p:last-child { margin: 0; } .at-icon-box .at-icon-box-icon { transition: all 0.3s ease 0s; } .at-icon-box .at-icon-box-icon i { position: relative; } .at-icon-box .at-icon-box-icon::before { background: #fde428 none repeat scroll 0 0; content: ""; display: block; height: 0; left: 29px; position: absolute; top: -3px; transition: all 0.3s ease 0s; width: 6px; } .at-icon-box .at-icon-box-icon::after { background: #fde428 none repeat scroll 0 0; bottom: -3px; content: ""; display: block; height: 0; left: 29px; position: absolute; transition: all 0.3s ease 0s; width: 6px; } .at-icon-box .at-icon-box-icon { position: relative; } .at-icon-box .at-icon-box-icon i { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: #002e5b; height: 55px; line-height: 55px; width: 64px; } .at-icon-box .at-icon-box-icon i::after { content: ""; font-family: "FontAwesome"; font-size: 55px; font-style: normal; font-variant: normal; font-weight: normal; left: 12px; line-height: 1; position: absolute; text-transform: none; top: 3px; }</style></head><body> <div class="container"> <div class="col_third"> <div class="at-icon-box at-icon-right clearfix"> <div style="width: 78px;" class="at-icon-box-icon"><i style="font-size: 15px;" class="fa fa-paper-plane"></i></div> <div class="at-icon-text"> <h5 class="no-stripe">Business Services<br> Consulting</h5> <p>Company that offers design and build services for you from initial sketches to the final production.</p> </div> </div> <div class="at-icon-box at-icon-right clearfix"> <div style="width: 78px;" class="at-icon-box-icon"><i style="font-size: 15px;" class="fa fa-paper-plane"></i></div> <div class="at-icon-text"> <h5 class="no-stripe">Business Services<br> Consulting</h5> <p>Company that offers design and build services for you from initial sketches to the final production.</p> </div> </div> <div class="at-icon-box at-icon-right clearfix"> <div style="width: 78px;" class="at-icon-box-icon"><i style="font-size: 15px;" class="fa fa-paper-plane"></i></div> <div class="at-icon-text"> <h5 class="no-stripe">Business Services<br> Consulting</h5> <p>Company that offers design and build services for you from initial sketches to the final production.</p> </div> </div> </div> <div class="col_third"> <img width="380px" height="550px" src="http://themenectar.com/demo/salient-corporate/wp-content/uploads/2015/12/compare-2.png" alt=""> </div> <div class="col_third end"> <div class="at-icon-box at-icon-left clearfix"> <div style="width: 78px;" class="at-icon-box-icon"><i style="font-size: 15px;" class="fa fa-paper-plane"></i></div> <div class="at-icon-text"> <h5 class="no-stripe">Business Services<br> Consulting</h5> <p>Company that offers design and build services for you from initial sketches to the final production.</p> </div> </div> <div class="at-icon-box at-icon-left clearfix"> <div style="width: 78px;" class="at-icon-box-icon"><i style="font-size: 15px;" class="fa fa-paper-plane"></i></div> <div class="at-icon-text"> <h5 class="no-stripe">Business Services<br> Consulting</h5> <p>Company that offers design and build services for you from initial sketches to the final production.</p> </div> </div> <div class="at-icon-box at-icon-left clearfix"> <div style="width: 78px;" class="at-icon-box-icon"><i style="font-size: 15px;" class="fa fa-paper-plane"></i></div> <div class="at-icon-text"> <h5 class="no-stripe">Business Services<br> Consulting</h5> <p>Company that offers design and build services for you from initial sketches to the final production.</p> </div> </div> </div> </div> </body></html>

Related: See More

Vuetify Material Dashboard

Questions / Comments: