Bootstrap Responsive Grid System For Vue.js

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>

Preview:

Bootstrap Responsive Grid System For Vue.js

Changelog:

v0.2.0 (08/04/2020)

  • Creating hidden component

Download Details:

Author: andrelmlins

Live Demo: https://vue-grid-responsive.netlify.app/

Download Link: https://github.com/andrelmlins/vue-grid-responsive/archive/master.zip

Official Website: https://github.com/andrelmlins/vue-grid-responsive

Install & Download:

# Yarn
$ yarn add vue-grid-responsive

# NPM
$ npm i vue-grid-responsive --save

You Might Be Interested In:

Add Comment