Skip to content

JohnnyTheTank/bootstrap-block-grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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