"grid"
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/Reklino/pen/pvZrMy" /> <link rel="stylesheet" href="https://cdn.rawgit.com/Reklino/elegant-theme-icons/master/style.css" /> <link rel="stylesheet" href="https://cdn.rawgit.com/Reklino/strings/master/strings.css"> <script src="//use.typekit.net/cua2obb.js"></script> <script>try{Typekit.load();}catch(e){}</script> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">.col-1 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 8.33333%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-2 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 16.66667%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-3 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 25%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-4 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 33.33333%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-5 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 41.66667%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-6 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 50%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-7 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 58.33333%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-8 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 66.66667%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-9 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 75%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-10 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 83.33333%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-11 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 91.66667%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-12 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .row { margin-bottom: 24px; overflow: hidden; *zoom: 1; } .container { max-width: 100%; margin-left: auto; margin-right: auto; width: 600px; margin: 0 auto; } .container:after { content: " "; display: block; clear: both; } body { font-family: 'proxima-nova', sans-serif; } p { line-height: 24px; } h1 { font-size: 72px; } h2 { font-size: 48px; } h3 { font-size: 36px; } h4 { font-size: 24px; } h5 { font-size: 18px; } h6 { font-size: 14px; } h1, h2, h3, h4, h5, h6 { line-height: 1em; font-weight: 700; } ul { margin: 0 0 0 1em; padding: 0; } li { line-height: 24px; } .s { font-size: 20px; line-height: 24px; } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } .pull-right { float: right; } .pull-left { float: left; } .remove-top { margin-top: 0; } .remove-bottom { margin-bottom: 0; } body { color: #1B1F2B; background: #FFFFFF; border-color: #1B1F2B; } .dark { background: #2f364a; color: #e6e6e6; border-color: #e6e6e6; } nav { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; bottom: 0; width: 100%; padding: 0 2em; text-align: center; line-height: 72px; font-weight: 400; font-size: 14px; } nav .title { padding: 0 1.5em; float: left; } nav .name { position: absolute; width: 200px; left: 0; right: 0; margin: 0 auto; } nav #light-switch { cursor: pointer; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; float: left; line-height: 72px; } nav .specimen { padding: 0 1.5em; float: right; } section { padding: 48px 0; } .space-block { width: 100%; height: 72px; border: 1px solid; margin-bottom: 24px; } .label { font-weight: 600; text-transform: uppercase; letter-spacing: 1.25px; color: #4c5779; } .photo-icon { overflow: hidden; position: relative; cursor: pointer; z-index: 0; margin: 0 auto; text-align: center; width: 125px; height: 125px; line-height: 125px; font-size: 3em; background-origin: center; background-size: 150%; -moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; } .photo-icon:before { position: absolute; z-index: 1; content: ''; display: block; width: 125px; height: 125px; opacity: 0.7; box-shadow: inset 0 0 1px 0 #FFFFFF; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .photo-icon span { -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; color: #FFFFFF; position: relative; top: 0px; z-index: 2; } .photo-icon span:nth-child(1) { color: #1B1F2B; position: absolute; margin-top: 135px; } .photo-icon:hover { background-position: 5% 5%; background-size: 160%; } .photo-icon:hover span { top: -100px; } .photo-icon:hover:before { opacity: 0.7; background: #FFFFFF !important; } .photo-icon.tools { background-image: url("http://publicdomainarchive.com/wp-content/uploads/2014/12/public-domain-images-free-stock-photos-high-quality-resolution-downloads-public-domain-archive-3-1000x750-170064_1000x675.jpg"); } .photo-icon.tools:before { background: #87F2D2; } .photo-icon.camera { background-image: url("http://publicdomainarchive.com/wp-content/uploads/2014/03/public-domain-images-free-stock-photos-high-quality-resolution-downloads-around-the-house-11-1000x666.jpg"); } .photo-icon.camera:before { background: #81E8E6; } .photo-icon.map { background-image: url("http://publicdomainarchive.com/wp-content/uploads/2014/08/public-domain-images-free-stock-photos-shoes-feet-walking-rocks-creek-1-1000x666.jpg"); } .photo-icon.map:before { background: #85DBA9; } .photo-icon.lightbulb { background-image: url("http://publicdomainarchive.com/wp-content/uploads/2014/10/public-domain-images-free-stock-photos-high-quality-resolution-downloads-nashville-tennessee-32-1000x666.jpg"); } .photo-icon.lightbulb:before { background: #F56AA3; } .photo-icon.bike { background-image: url("http://publicdomainarchive.com/wp-content/uploads/2014/12/public-domain-images-free-stock-photos-high-quality-resolution-downloads-public-domain-archive-7-1000x665.jpg"); } .photo-icon.bike:before { background: #DE6BD3; } .photo-icon.heart { background-image: url("http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-wedding-dress-outdoors-green-grass-wisteria-vines-1000x666.jpg"); } .photo-icon.heart:before { background: #D66AF5; } .photo-icon.circle { -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } .photo-icon.circle:before { -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } </style></head><body> <body class='dark'> <nav> <div class='title'>Enchirideon</div> <div class='s s-sun' id='light-switch'></div> <div class='specimen'>1.0.0</div> <div class='name'>Index</div> </nav> <section> <div class='container align-center'> <div class='row'> <div class='col-4'> <div class='photo-icon circle lightbulb'> <span class='icon-lightbulb'></span> <span class='icon-lightbulb'></span> </div> <h6 class='label'>Concepts</h6> </div> <div class='col-4'> <div class='photo-icon circle bike'> <span class='icon-bike'></span> <span class='icon-bike'></span> </div> <h6 class='label'>Activity</h6> </div> <div class='col-4'> <div class='photo-icon circle heart'> <span class='icon-heart'></span> <span class='icon-heart'></span> </div> <h6 class='label'>About</h6> </div> </div> <div class='row'> <div class='col-4'> <div class='photo-icon circle tools'> <span class='icon-tools'></span> <span class='icon-tools'></span> </div> <h6 class='label'>Designs</h6> </div> <div class='col-4'> <div class='photo-icon circle camera'> <span class='icon-camera'></span> <span class='icon-camera'></span> </div> <h6 class='label'>Photos</h6> </div> <div class='col-4'> <div class='photo-icon circle map'> <span class='icon-map'></span> <span class='icon-map'></span> </div> <h6 class='label'>Locations</h6> </div> </div> </div> </section> </body> <script src='https://cdn.rawgit.com/desandro/classie/master/classie.js'></script><script src='https://codepen.io/Reklino/pen/RNYNaZ.js'></script> </body></html>

Related: See More

Paper Dashboard React
Pinterest-like Responsive Grid
Grid Columns Divider
Bootstrap Editable jQuery Grid

Questions / Comments: