Bootstrap Responsive Grid System For Vue.js

Install & Download:

# Yarn
$ yarn add vue-grid-responsive
# NPM
$ npm i vue-grid-responsive --save

Description:

A responsive grid system for Vue.js, based on Bootstrap framework.

How to use it:

1. Import components from the vue-grid-responsive.

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 grid system in HTML.

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