Bootstrap based responsive grid system for Vue.js

Category: Layout Vue.js | August 25, 2021
Author: andrelmlins
Official Page: Go to website
Last Update: August 25, 2021
License: MIT

vuejs bootstrap grid system

Description:

A simple and intuitive Bootstrap based responsive grid system for Vue.js which is, compatible with Vue.js version 2 and 3.

How to install and use it?

1. Install the component with npm or yarn.

#npm
npm i [email protected]

#yarn
yarn add [email protected]

2. Import the required components.

import { createApp } from 'vue';
import { Row, Column, Hidden } from 'vue-grid-responsive';

3. Now, register the components.

const app = createApp(App);

app.component('row', Row);
app.component('column', Column);
app.component('hidden', Hidden);

4. Add the grid system in your template file.

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

And, you are done. 🙂