Press "Enter" to skip to content

Responsive Grid System Based on Bootstrap for Vue

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

PropDefaultTypeDescription
gutternumberGrid spacing in the container
columns12numberSetting columns count in the container

Column Component props

Basic Size

PropDefaultTypeDescription
xsnumberSize in extra small screen
smnumberSize in small screen
mdnumberSize in medium screen
lgnumberSize in large screen
xlnumberSize in extra large screen
ordernumberOrder the columns

Offset

PropDefaultTypeDescription
xsOffsetnumberOffset in extra small screen
smOffsetnumberOffset in small screen
mdOffsetnumberOffset in medium screen
lgOffsetnumberOffset in large screen
xlOffsetnumberOffset in extra large screen

Hidden Component props

PropDefaultTypeDescription
xsbooleanHidden in extra small size
smbooleanHidden in small size
mdbooleanHidden in medium size
lgbooleanHidden in large size
xlbooleanHidden 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

    Leave a Reply

    Your email address will not be published. Required fields are marked *