"grid uikit"
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 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/MrFeather/pen/OxZZwd?limit=all&page=12&q=uikit" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css'> <style class="cp-pen-styles"></style></head><body> <div class="uk-grid-small uk-animation-fade uk-flex-middle uk-child-width-1-9 uk-child-width-1-2@m uk-child-width-1-3@l uk-padding-small" uk-grid> <div> <div class="uk-card uk-card-default uk-card-hover"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d6/BT_logo.svg/1280px-BT_logo.svg.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">British Telecom</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">Internet Service Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 4, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://www.ccsmedia.com/media/ccs-logo.svg"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">CCS Media</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">Supplier</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Dell_logo_2016.svg/1200px-Dell_logo_2016.svg.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Dell</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">Supplier</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://pbs.twimg.com/profile_images/2321816769/hksaximdvw4secu70omb.jpeg"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">ACS 365</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">Supplier</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Vmware.svg/1000px-Vmware.svg.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">VMware</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">Software Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://seeklogo.com/images/H/hp-logo-EEECF99DCE-seeklogo.com.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Hewlett Packard</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">Supplier</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Hewlett_Packard_Enterprise_logo.svg/1200px-Hewlett_Packard_Enterprise_logo.svg.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Hewlett Packard Enterprise</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">Supplier</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://login.salesforce.com/img/logo198.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">SalesForce</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">SaaS Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://business.sky.com/static/images/logos/Spectrum-mark-2016-sml-RGB-PNG.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Sky</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">Supplier</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://png.icons8.com/supplier/color/100"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Network Connect</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">Service Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://wac-cdn.atlassian.com/dam/jcr:89e146b4-642e-41fc-8e65-7848337d7bdd/atlassian_charlie_square.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Atlassian</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">SaaS Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Sophos_logo.svg/1024px-Sophos_logo.svg.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Sophos</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">SaaS Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="http://www.scality.com/wp-content/uploads/2016/03/Veeam.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Veeam</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">SaaS Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://752f77aa107738c25d93-f083e9a6295a3f0714fa019ffdca65c3.ssl.cf1.rackcdn.com/icons/og-image.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Rackspace</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">PaaS Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="http://blog.mailgun.com/content/images/2015/12/Mailgun_Icon.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">MailGun</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">PaaS Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="http://1k2qy51jcpdx2peszat8iswc.wpengine.netdna-cdn.com/wp-content/uploads/2016/03/commvault_logo.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">CommonVault</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">DaaS Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="http://www.exponential-e.com/images/About_us/favicon.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Exponential-e</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">Internet Service Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/AmazonWebservices_Logo.svg/2000px-AmazonWebservices_Logo.svg.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Amazon Web Services</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">PaaS Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://www.guestline.com/_caches/_image/actual_middlecentre/600x/userfile/images/news/gl-no-strap-sml.jpg"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Guestline</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">SaaS Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/2000px-Microsoft_logo_%282012%29.svg.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Microsoft</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">SaaS Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img width="60" height="60" src="http://helpwiki.evergreen.edu/wiki/images/2/29/Papercut_small_logo.png"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">PaperCut</h3> <p class="uk-text uk-margin-remove"><time datetime="2016-04-01T19:00">Software Provider</time></p> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">Contracts: 1, Warranties: 0</time></p> </div> </div> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit-icons.min.js'></script> </body></html>

Related: See More

Full Calendar
Pinterest-like Responsive Grid
Grid Columns Divider
Bootstrap Editable jQuery Grid

Questions / Comments: