Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andersdjohnson/bootstrap-grid-ms
Missing grid range in Bootstrap 3, micro-small from 480-767px.
https://github.com/andersdjohnson/bootstrap-grid-ms
bootstrap bootstrap-grid grid layout responsive responsive-grid responsive-layout
Last synced: 3 months ago
JSON representation
Missing grid range in Bootstrap 3, micro-small from 480-767px.
- Host: GitHub
- URL: https://github.com/andersdjohnson/bootstrap-grid-ms
- Owner: AndersDJohnson
- License: mit
- Created: 2014-12-30T18:39:38.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2020-07-06T19:10:56.000Z (over 4 years ago)
- Last Synced: 2024-10-12T23:15:53.759Z (4 months ago)
- Topics: bootstrap, bootstrap-grid, grid, layout, responsive, responsive-grid, responsive-layout
- Language: CSS
- Homepage: https://AndersDJohnson.github.io/bootstrap-grid-ms/test/index.html
- Size: 93.8 KB
- Stars: 32
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Bootstrap Grid Micro-Small
[](https://travis-ci.org/AndersDJohnson/bootstrap-grid-ms)
The missing grid range in Bootstrap 3, below `sm`, from 480 to 767 pixels, redefining `xs` to less than 480 pixels.
## Demo
* https://AndersDJohnson.github.io/bootstrap-grid-ms/test/index.html
* https://AndersDJohnson.github.io/bootstrap-grid-ms/test/index-sass.html
## Install
```sh
bower install --save bootstrap-grid-ms
```
## Use
Use the `col-ms-*`, `hidden-ms`, `visible-ms`, and `visible-ms-*` classes, e.g.:
```html
...
```
Using LESS or SCSS/Sass, you can redefine the default Bootstrap breakpoints, and `bootstrap-grid-ms` will respect those.
### LESS
You will need Bootstrap LESS installed, e.g. via Bower:
```
bower install --save bootstrap
```
In your LESS, somewhere after importing Bootstrap, import the LESS file:
```less
@import "bower_components/bootstrap/less/bootstrap";
@import "bower_components/bootstrap-grid-ms/less/bootstrap-grid-ms";
```
### SCSS/Sass
You will need an SCSS/Sass version of Bootstrap, which is not included in this module's default Bower dependencies.
```
bower install --save bootstrap-sass
```
In your SCSS/Sass, somewhere after importing Bootstrap, import the SCSS file:
```scss
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
@import "bower_components/bootstrap-grid-ms/scss/bootstrap-grid-ms";
```
### CSS
Or use the CSS file, somewhere after Bootstrap:
```css
@import "bower_components/bootstrap-grid-ms/dist/bootstrap-grid-ms.min.css";
```
## Credit
Originally taken from from: https://gist.github.com/wdollar/135ec3c80faaf5a821b0
Original notes:
> This is a hack to fill the gap between 480 and 767 pixels - a missing range
in the bootstrap responsive grid structure. Use these classes to style pages
on cellphones when they transition from portrait to landscape.
> Contains:
Columns, Offsets, Pushes, Pulls for the Mid-Small layout
Visibility classes for the Mid-Small layout
Redefined visibility classes for the Extra Small layout
> See https://github.com/twbs/bootstrap/issues/10203 for more info.
Forked from: https://gist.github.com/Jakobud/8eca95f07a3b50453cd7
Original gist: https://gist.github.com/andyl/6360906