JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 862
  • Score
    100M100P100Q99205F
  • License MIT

Standalone version of Bootstrap's grid system

Package Exports

  • bootstrap-grid
  • bootstrap-grid/dist/grid.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bootstrap-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

bootstrap-grid

Standalone version of Bootstrap 3 grid system. See the test file for a demo.

Why?

Bootstrap 3 contains a best of breed responsive grid system. It's useful without all the rest of Bootstrap. This project contains a standalone version of it with related utility classes.

How to use the grid system?

See Bootstrap's grid system and responsive utilities documentation.

How do I use this project?

You have several choices:

  1. Download the grid.css or grid.min.css file from the dist folder and include it in your project.
  2. Install this package with npm and include/require grid.css or grid.min.css directly from node_modules.
  3. If you are using webpack with css-loader you can just require("bootstrap-grid").
  4. Any other way you can think of really.

The Bootstrap grid system expects the columns and containers to have box-sizing: border-box set. The grid.css file doesn't have that rule because it's set in Bootstrap's scaffolding.less file that also includes lot's of other modifications to global element styles. We could set the rule for you globally but a small library like this shouldn't include such things.

Because of this you must set it yourself using * { box-sizing: border-box; }. You can also set it separately for every Bootstrap class but that's not really fun...

You can check the test file for an example how to use and setup the grid.

What's included?

The following classes are included:

  • clearfix
  • container
  • container-fluid
  • row
  • All the col classes from col-xs-1 to col-lg-12 including push, pull and offset versions: col-(xs-lg)-[(push|pull|offset)-](1-12)
  • hidden classes for all breakpoints: hidden-(xs-lg|print)
  • visible classes for all breakpoints and display values: visible-(xs-lg|print)-(block|inline|inline-block).
  • visible-(xs-lg|print) are also included but they are deprecated as of Bootstrap v3.2.0 and should not be used.

How do I build this?

Install dependencies

$ npm install

Run build

$ npm run build

grid.css and the minified grid.min.css are generated.