"grid"
Bootstrap 4.1.1 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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"> <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>CodePen - grid images</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> .grid { max-width: 1180px; width: 100%; margin: 0 auto; background: red; height: 885px; font-size: 0; } .grid .coll { font-size: 12px; max-width: 25%; width: 100%; display: inline-block; vertical-align: top; height: 100%; background: #606060; } .grid .coll .square { height: 295px; width: 100%; background: #bbb; border: 1px solid #ccc; } .grid .coll .square article { position: relative; top: 50%; transform: translatey(-50%); width: 90px; margin: 0 auto; background: #CCC; text-align: center; } .grid .coll .square.big { height: 590px; background: #d2d2d2; } </style> <script> window.console = window.console || function(t) {}; </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <section class="grid"> <div class="coll"> <div class="square big"> <article> <h1>dsfdfd</h1> <p>New Arrivals</p> </article> </div> <div class="square">1111</div> </div> <div class="coll"> <div class="square">1111</div> <div class="square">1111</div> <div class="square">1111</div> </div> <div class="coll"> <div class="square">1111</div> <div class="square">1111</div> <div class="square">1111</div> </div> <div class="coll"> <div class="square">1111</div> <div class="square big">1111</div> </div> </section> </body> </html>

Related: See More

Now UI Dashboard Angular
Pinterest-like Responsive Grid
Grid Columns Divider
Bootstrap Editable jQuery Grid

Questions / Comments: