Skip to content

Latest commit

 

History

History
100 lines (87 loc) · 2.92 KB

README.md

File metadata and controls

100 lines (87 loc) · 2.92 KB
Raw

bootstrap-block-grid

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

npm version Bower version

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">
    1. 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">
    1. 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">
    1. 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