Bootstrap Responsive Grid System For Vue.js

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:

Changelog:

v0.5.0 (01/03/2022)

• feat: passing class and style properties

v0.4.1 (10/02/2021)

• refactor: replace computed instead of method

v0.4.0 (08/25/2021)

• Column ordering

v0.3.0 (05/16/2021)

• update

v0.2.2 (04/14/2021)

• fix: xl settings for grid

v0.2.1 (02/03/2021)

• Update package

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