Vue Grid Responsive is a Vue.js responsive grid system, based on the Bootstrap framework.
5 column responsive grid bootstrap 4, bootstrap grid examples, bootstrap grid system, bootstrap 4 grid, bootstrap grid generator, bootstrap stack columns vertically
How to make use of it:
Install and download:
# Yarn $ yarn add vue-grid-responsive # NPM $ npm i vue-grid-responsive --save
1. Import components from vue-grid-response.
import Vue from 'vue'; import { Row, Column } from 'vue-grid-responsive';
2. Register the component.
Vue.component('row', Row); Vue.component('column', Column);
3. Create a responsive web system in HTML format.
<row container gutter="{12}"> <column xs="{12}" md="{4}" lg="{3}"> xs=12 md=4 lg=3 </column> <column xs="{12}" md="{4}" lg="{3}"> xs=12 md=4 lg=3 </column> <column xs="{12}" md="{4}" lg="{3}"> xs=12 md=4 lg=3 </column> <column xs="{12}" md="{4}" lg="{3}"> xs=12 md=4 lg=3 </column> </row>
Row Component props
Prop | Default | Type | Description |
---|---|---|---|
gutter | – | number | Grid spacing in the container |
columns | 12 | number | Setting columns count in the container |
Column Component props
Basic Size
Prop | Default | Type | Description |
---|---|---|---|
xs | – | number | Size in extra small screen |
sm | – | number | Size in small screen |
md | – | number | Size in medium screen |
lg | – | number | Size in large screen |
xl | – | number | Size in extra large screen |
order | – | number | Order the columns |
Offset
Prop | Default | Type | Description |
---|---|---|---|
xsOffset | – | number | Offset in extra small screen |
smOffset | – | number | Offset in small screen |
mdOffset | – | number | Offset in medium screen |
lgOffset | – | number | Offset in large screen |
xlOffset | – | number | Offset in extra large screen |
Hidden Component props
Prop | Default | Type | Description |
---|---|---|---|
xs | – | boolean | Hidden in extra small size |
sm | – | boolean | Hidden in small size |
md | – | boolean | Hidden in medium size |
lg | – | boolean | Hidden in large size |
xl | – | boolean | Hidden in extra large size |
Bootstrap Responsive Grid System For Vue.js, Vue Grid Responsive Plugin/Github, bootstrap layout, bootstrap offset
See Demo And Download
Official Website(andrelmlins): Click Here
This superior jQuery/javascript plugin is developed by andrelmlins. For extra advanced usage, please go to the official website.
Be First to Comment