https://github.com/andrelmlins/vue-grid-responsive
Responsive grid system based on Bootstrap for Vue
https://github.com/andrelmlins/vue-grid-responsive
bootstrap grid responsive vue
Last synced: 8 months ago
JSON representation
Responsive grid system based on Bootstrap for Vue
- Host: GitHub
- URL: https://github.com/andrelmlins/vue-grid-responsive
- Owner: andrelmlins
- License: mit
- Created: 2020-05-31T19:49:54.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T08:15:42.000Z (almost 3 years ago)
- Last Synced: 2025-04-03T20:38:28.644Z (8 months ago)
- Topics: bootstrap, grid, responsive, vue
- Language: Vue
- Homepage: https://vue-grid-responsive.netlify.app/
- Size: 368 KB
- Stars: 29
- Watchers: 1
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-grid-responsive - Responsive grid system based on Bootstrap for Vue 2.x. (Components & Libraries / UI Components)
- awesome-vue - vue-grid-responsive - Responsive grid system based on Bootstrap for Vue ` 📝 10 days ago` (UI Components [🔝](#readme))
README
Vue Grid Responsive
Responsive grid system based on Bootstrap for Vue.
[](https://www.npmjs.com/package/vue-grid-responsive) • [](https://github.com/andrelmlins/vue-grid-responsive/blob/master/LICENSE) • [](https://travis-ci.com/andrelmlins/vue-grid-responsive)
## Installation
### NPM
**vue 2.0**
```
npm i vue-grid-responsive
// OR
yarn add vue-grid-responsive
```
**vue 3.0**
```
npm i vue-grid-responsive@next
// OR
yarn add vue-grid-responsive@next
```
### CDN
**vue 2.0**
```html
```
**vue 3.0**
```html
```
### Manual
You can also download and import it manually
```html
```
## Module import
**vue 2.0**
```js
import Vue from 'vue';
import { Row, Column, Hidden } from 'vue-grid-responsive';
Vue.component('row', Row);
Vue.component('column', Column);
Vue.component('hidden', Hidden);
```
**vue 3.0**
```js
import { createApp } from 'vue';
import { Row, Column, Hidden } from 'vue-grid-responsive';
const app = createApp(App);
app.component('row', Row);
app.component('column', Column);
app.component('hidden', Hidden);
```
## Examples
An example of how to use the library:
```vue
xs=12 md=4 lg=3
xs=12 md=4 lg=3
xs=12 md=4 lg=3
xs=12 md=4 lg=3
```
An example how to use offset in addition with a columns:
```vue
```
Using the hidden component:
```vue
hidden xs
hidden md
hidden xl
```
## Demo [Link](https://vue-grid-responsive.netlify.com/)
Local demo:
```
git clone https://github.com/andrelmlins/vue-grid-responsive.git
cd vue-grid-responsive
npm && npm run dev
```
## Properties
Component props:
### Row Component props
| Prop | Default | Type | Description |
| ------- | ------- | ------ | -------------------------------------- |
| gutter | - | number | Grid spacing in the container |
| columns | 12 | number | Setting columns count in the container |
### Column Component props
#### Basic Size
| Prop | Default | Type | Description |
| ----- | ------- | ------ | -------------------------- |
| xs | - | number | Size in extra small screen |
| sm | - | number | Size in small screen |
| md | - | number | Size in medium screen |
| lg | - | number | Size in large screen |
| xl | - | number | Size in extra large screen |
| order | - | number | Order the columns |
#### Offset
| Prop | Default | Type | Description |
| -------- | ------- | ------ | ---------------------------- |
| xsOffset | - | number | Offset in extra small screen |
| smOffset | - | number | Offset in small screen |
| mdOffset | - | number | Offset in medium screen |
| lgOffset | - | number | Offset in large screen |
| xlOffset | - | number | Offset in extra large screen |
### Hidden Component props
| Prop | Default | Type | Description |
| ---- | ------- | ------- | -------------------------- |
| xs | - | boolean | Hidden in extra small size |
| sm | - | boolean | Hidden in small size |
| md | - | boolean | Hidden in medium size |
| lg | - | boolean | Hidden in large size |
| xl | - | boolean | Hidden in extra large size |
## NPM Statistics
Download stats for this NPM package
[](https://nodei.co/npm/vue-grid-responsive/)
## License
Vue Grid Responsive is open source software [licensed as MIT](https://github.com/andrelmlins/vue-grid-responsive/blob/master/LICENSE).