bootstrap-block-grid

    1.1.7 • Public • Published

    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/bootstrap.block-grid/latest/bootstrap3-block-grid.min.css">
      <!-- bootstrap 4 -->
      <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.block-grid/latest/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

    Install

    npm i bootstrap-block-grid

    DownloadsWeekly Downloads

    221

    Version

    1.1.7

    License

    MIT

    Last publish

    Collaborators

    • johnnythetank