<!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="style.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.block-grid/latest/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>
<iframe src="https://ghbtns.com/github-btn.html?user=JohnnyTheTank&repo=bootstrap-block-grid&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<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;
}
# bootstrap-block-grid
**block grid** library (css & sass) for [twitter bootstrap](https://github.com/twbs/bootstrap) (version 3 & 4), based on the native [zurb foundation feature](http://foundation.zurb.com/sites/docs/v/5.5.3/components/block_grid.html)
## demo
[demo on plnkr](http://plnkr.co/qkyOlC)
## usage
1. Install via either [bower](http://bower.io/), [npm](https://www.npmjs.com/), CND or downloaded files:
1. `bower install --save bootstrap-block-grid`
2. `npm install --save bootstrap-block-grid`
3. use CDN files from [jsdelivr](http://www.jsdelivr.com/projects)
4. download [bootstrap-block-grid.zip](https://github.com/JohnnyTheTank/bootstrap-block-grid/zipball/master)
2. Add files to your html
1. when using bower
```html
<!-- bootstrap 3 -->
<script src="bower_components/bootstrap-block-grid/dist/bootstrap3-block-grid.min.css"></script>
<!-- bootstrap 4 -->
<script src="bower_components/bootstrap-block-grid/dist/bootstrap4-block-grid.min.css"></script>
```
2. when using npm
```html
<!-- bootstrap 3 -->
<script src="node_modules/bootstrap-block-grid/dist/bootstrap3-block-grid.min.css"></script>
<!-- bootstrap 4 -->
<script src="node_modules/bootstrap-block-grid/dist/bootstrap4-block-grid.min.css"></script>
```
3. when using CDN files from jsdelivr
```html
<!-- bootstrap 3 -->
<script src="//cdn.jsdelivr.net/bootstrap.block-grid/1.1.4/bootstrap3-block-grid.min.css"></script>
<!-- bootstrap 4 -->
<script src="//cdn.jsdelivr.net/bootstrap.block-grid/1.1.4/bootstrap4-block-grid.min.css"></script>
```
4. when using downloaded files
```html
<!-- bootstrap 3 -->
<script src="bootstrap3-block-grid.min.css"></script>
<!-- bootstrap 4 -->
<script src="bootstrap4-block-grid.min.css"></script>
```
3. Sample Markup
```html
<div class="block-grid-xs-2 block-grid-sm-3 block-grid-md-4">
<div>
Content 1
</div>
<div>
Content 2
</div>
<div>
Content 3
</div>
<div>
Content 4
</div>
<div>
Content 5
</div>
<div>
Content 6
</div>
</div>
```
## available classes
- *xs*
- `block-grid-xs-1`
- `block-grid-xs-2`
- ...
- `block-grid-xs-12`
- *sm*
- `block-grid-sm-1`
- `block-grid-sm-2`
- ...
- `block-grid-sm-12`
- *md*
- `block-grid-md-1`
- `block-grid-md-2`
- ...
- `block-grid-md-12`
- *lg*
- `block-grid-lg-1`
- `block-grid-lg-2`
- ...
- `block-grid-lg-12`
# licence
MIT