"Grid boxes"
Bootstrap 3.1.0 Snippet by Ashwani Rawat

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Box my flight search</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="wraper"> <main> <!-- <div class="container"> --> <div class="box-section"> <!-- <div class="row"> --> <div class=" col-lg-4 col-lg-4 col-lg-4 col-lg-4"> <div class="box"> <img src="https://images.sftcdn.net/images/t_optimized,f_auto/p/94bb61bc-96db-11e6-8bc1-00163ec9f5fa/468969178/weather-desktop-background-changer-logo.png" alt="view"/> <h3><span class="flight">Lorem</span> Ipsum Ipsum</h3> <h4>TITLE HERE</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button type="button">MYFLIGHTSEARCH</button> </div> </div> <div class=" col-lg-4 col-lg-4 col-lg-4 col-lg-4"> <div class="box"> <img src="https://images.sftcdn.net/images/t_optimized,f_auto/p/94bb61bc-96db-11e6-8bc1-00163ec9f5fa/468969178/weather-desktop-background-changer-logo.png" alt="view"/> <h3><span class="flight">Lorem</span> Ipsum Ipsum</h3> <h4>TITLE HERE</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button type="button">MYFLIGHTSEARCH</button> </div> </div> <div class=" col-lg-4 col-lg-4 col-lg-4 col-lg-4"> <div class="box"> <img src="https://images.sftcdn.net/images/t_optimized,f_auto/p/94bb61bc-96db-11e6-8bc1-00163ec9f5fa/468969178/weather-desktop-background-changer-logo.png" alt="view"/> <h3><span class="flight">Lorem</span> Ipsum Ipsum</h3> <h4>TITLE HERE</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button type="button">MYFLIGHTSEARCH</button> </div> </div> <!-- </div> --> </div> <!-- </div> --> </main> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
*{ margin:0; padding:0;} .wraper ,main ,.box-section ,.box{float:left;width:100%;background: #000;color: #fff;padding: 20px 0px;} .box{border: 1px solid #afacac;margin:0 auto;text-align:center;border-radius: 5px;} .box h3{margin:0;font-weight: 600;line-height: 40px;border-bottom: 1px solid #afacac;} .flight{ color:#00638c;} .box p{text-align:left;padding: 20px;margin: 0;} .box button{border:none;background: #00638c;color: #fff;outline: none;border-radius: 4px;padding: 7px 10px;font-size: 18px;margin-bottom: 20px;} .box h4{margin:0;margin-top: 15px;}

Related: See More


Questions / Comments: