bootstrap-block-grid

block grid library (css & sass) for twitter bootstrap (version 3 & 4), based on the native zurb foundation feature

demo

demo on plnkr

usage

1. Install via either bower, npm, CND or downloaded files:

   1. bower install --save bootstrap-block-grid
   2. npm install --save bootstrap-block-grid
   3. use CDN files from jsdelivr
   4. download bootstrap-block-grid.zip

2. Add files to your html

   1. when using bower

   <!-- bootstrap 3 -->
   <link rel="stylesheet" href="bower_components/bootstrap-block-grid/dist/bootstrap3-block-grid.min.css">
   <!-- bootstrap 4 -->
   <link rel="stylesheet" href="bower_components/bootstrap-block-grid/dist/bootstrap4-block-grid.min.css">

   2. when using npm

   <!-- bootstrap 3 -->
   <link rel="stylesheet" href="node_modules/bootstrap-block-grid/dist/bootstrap3-block-grid.min.css">
   <!-- bootstrap 4 -->
   <link rel="stylesheet" href="node_modules/bootstrap-block-grid/dist/bootstrap4-block-grid.min.css">

   3. when using CDN files from jsdelivr

   <!-- bootstrap 3 -->
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap-block-grid@latest/dist/bootstrap3-block-grid.min.css">
   <!-- bootstrap 4 -->
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap-block-grid@latest/dist/bootstrap4-block-grid.min.css">

   4. when using downloaded files

   <!-- bootstrap 3 -->
   <link rel="stylesheet" href="bootstrap3-block-grid.min.css">
   <!-- bootstrap 4 -->
   <link rel="stylesheet" href="bootstrap4-block-grid.min.css">

3. Sample Markup

   <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

license

MIT