https://github.com/benmccallum/vue-bootstrap-breakpoint-indicator
A Vue.js component that displays a small indicator of the current Bootstrap breakpoint (e.g. XS, SM, MD, LG or XL) in the top-left of the page.
https://github.com/benmccallum/vue-bootstrap-breakpoint-indicator
bootstrap bootstrap4 vue vue-components vuejs vuejs2
Last synced: about 1 year ago
JSON representation
A Vue.js component that displays a small indicator of the current Bootstrap breakpoint (e.g. XS, SM, MD, LG or XL) in the top-left of the page.
- Host: GitHub
- URL: https://github.com/benmccallum/vue-bootstrap-breakpoint-indicator
- Owner: benmccallum
- License: mit
- Created: 2017-09-10T20:00:12.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-03-09T01:01:40.000Z (over 3 years ago)
- Last Synced: 2024-05-22T16:23:31.676Z (about 2 years ago)
- Topics: bootstrap, bootstrap4, vue, vue-components, vuejs, vuejs2
- Language: Vue
- Size: 1.26 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-bootstrap-breakpoint-indicator
A Vue.js component that displays a small indicator of the current Bootstrap breakpoint (e.g. XS, SM, MD, LG or XL) in the top-left of the page. Useful during development to know which breakpoint you're styling for as you resize the viewport or device emulate.
Note: the element the component renders is positioned absolutely with some default styles, so it should appear in the top left of the viewport. You can customize this display by adding your own styles against `#vue-bootstrap-breakpoint-indicator`.
## Installation
### Vue CLI
```js
vue add vue-cli-plugin-bootstrap-breakpoint-indicator
```
### Vue 2
```js
yarn add --dev vue-bootstrap-breakpoint-indicator
npm install --save-dev vue-bootstrap-breakpoint-indicator
```
### Browser
See [example](/examples/demo.html)
### Vue SFC
```vue
import VueBootstrapBreakpointIndicator from 'vue-bootstrap-breakpoint-indicator';
export default {
name: 'app',
components: {
'breakpoint-indicator': VueBootstrapBreakpointIndicator
}
};
// Your own styles
```