"bootstrap-block-grid"
Bootstrap 3.3.0 Snippet by JohnnyTheTank

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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> <head> <!-- Charset --> <meta charset="utf-8"> <!-- Viewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- IE Force --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" /> <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://cdn.rawgit.com/JohnnyTheTank/bootstrap-block-grid/v1.1.1/dist/bootstrap3-block-grid.min.css" /> <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Block-Grid for Bootstrap 3 - Demo</h1> <a href="https://github.com/JohnnyTheTank/bootstrap-block-grid" target="_blank">Get Block-Grid for Twitter Bootstrap on GitHub</a> <br><br> <div class="alert alert-warning" role="alert">Resize this window!</div> <br><h2>Sample 1</h2><br><br> <div class="block-grid-xs-1 block-grid-sm-2 block-grid-md-3 block-grid-lg-4"> <div class="pixel-border">Content 1</div> <div class="pixel-border">Content 2</div> <div class="pixel-border">Content 3</div> <div class="pixel-border">Content 4</div> <div class="pixel-border">Content 5</div> <div class="pixel-border">Content 6</div> <div class="pixel-border">Content 7</div> <div class="pixel-border">Content 8</div> <div class="pixel-border">Content 9</div> <div class="pixel-border">Content 10</div> </div> <br><br><h2>Sample 2</h2><br><br> <ul class="block-grid-xs-2 block-grid-sm-3 block-grid-md-4 block-grid-lg-5"> <li class="pixel-border">Content 1</li> <li class="pixel-border">Content 2<br><small>Look how it works</small></li> <li class="pixel-border">Content 3</li> <li class="pixel-border">Content 4</li> <li class="pixel-border">Content 5</li> <li class="pixel-border">Content 6</li> <li class="pixel-border">Content 7<br><small>Look how it works</small></li> <li class="pixel-border">Content 8<br><small>Look how it works</small></li> <li class="pixel-border">Content 9<br><small>Look how it works</small></li> <li class="pixel-border">Content 10<br><small>Look how it works</small></li> <li class="pixel-border">Content 11<br><small>Look how it works</small></li> <li class="pixel-border">Content 12</li> <li class="pixel-border">Content 13</li> <li class="pixel-border">Content 14</li> <li class="pixel-border">Content 15</li> <li class="pixel-border">Content 16</li> <li class="pixel-border">Content 17<br><small>Look how it works</small><br><small>Look how it works</small><br><small>Look how it works</small></li> <li class="pixel-border">Content 18</li> <li class="pixel-border">Content 19</li> <li class="pixel-border">Content 20</li> </ul> <br><br> </div> </body> </html>
.pixel-border { border:1px solid grey; background-color:#555; color:white; }

Related: See More

Paper Kit 2 Angular
Pinterest-like Responsive Grid
Grid Columns Divider
Bootstrap Editable jQuery Grid

Questions / Comments: