https://github.com/johnnythetank/bootstrap-block-grid

real block grid for bootstrap
https://github.com/johnnythetank/bootstrap-block-grid

block-grid blockgrid bootstrap

Last synced: 3 months ago
JSON representation

real block grid for bootstrap

• Host: GitHub
• URL: https://github.com/johnnythetank/bootstrap-block-grid
• Owner: JohnnyTheTank
• License: mit
• Created: 2015-11-16T09:40:44.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2020-04-06T11:31:25.000Z (over 4 years ago)
• Last Synced: 2024-09-27T15:21:42.961Z (3 months ago)
• Topics: block-grid, blockgrid, bootstrap
• Language: CSS
• Homepage:
• Size: 25.4 KB
• Stars: 42
• Watchers: 6
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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)

[![npm version](https://badge.fury.io/js/bootstrap-block-grid.png)](https://badge.fury.io/js/bootstrap-block-grid)

[![Bower version](https://badge.fury.io/bo/bootstrap-block-grid.png)](https://badge.fury.io/bo/bootstrap-block-grid)

## 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

    

    

    

    

    ```

    2. when using npm

    ```html

    

    

    

    

    ```

    3. when using CDN files from jsdelivr

    ```html

    

    

    

    

    ```

    4. when using downloaded files

    ```html

    

    

    

    

    ```

3. Sample Markup

    ```html

    


        


            Content 1

        

        


            Content 2

        

        


            Content 3

        

        


            Content 4

        

        


            Content 5

        

        


            Content 6

        

    

    ```


## 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