bootstrap-vue
Advanced tools
With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extens
BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js. It allows developers to use Bootstrap's powerful, responsive design framework within Vue.js applications, offering a wide range of UI components and utilities.
Grid System
BootstrapVue provides a responsive grid system that allows you to create complex layouts using rows and columns. The example demonstrates a simple two-column layout.
<template>
<b-container>
<b-row>
<b-col>Column 1</b-col>
<b-col>Column 2</b-col>
</b-row>
</b-container>
</template>Form Inputs
BootstrapVue includes a variety of form input components, such as text inputs, checkboxes, and radio buttons. The example shows a simple form with email and password fields.
<template>
<b-form>
<b-form-group label="Email address">
<b-form-input type="email" placeholder="Enter email"></b-form-input>
</b-form-group>
<b-form-group label="Password">
<b-form-input type="password" placeholder="Password"></b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
</template>Modals
BootstrapVue provides modal components that can be used to display content in a dialog box. The example shows how to create and trigger a modal.
<template>
<div>
<b-button v-b-modal.my-modal>Launch Demo Modal</b-button>
<b-modal id="my-modal" title="BootstrapVue Modal">
<p class="my-4">Hello from modal!</p>
</b-modal>
</div>
</template>Alerts
BootstrapVue includes alert components for displaying feedback messages. The example shows a simple success alert.
<template>
<b-alert show variant="success">Success Alert!</b-alert>
</template>Navigation
BootstrapVue provides navigation components such as navbars and tabs. The example shows a responsive navbar with a brand and two links.
<template>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">Navbar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Home</b-nav-item>
<b-nav-item href="#">Link</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</template>Vuetify is a popular Vue.js component library that follows the Material Design specification. It offers a wide range of UI components and is known for its rich feature set and ease of use. Compared to BootstrapVue, Vuetify provides a different design aesthetic and may be preferred for applications that aim to follow Material Design guidelines.
Element UI is a Vue.js 2.0 based component library for developers, designers, and product managers. It provides a set of high-quality components and is known for its simplicity and ease of use. Element UI offers a different set of components and design principles compared to BootstrapVue, making it a good alternative for those looking for a different style.
Ant Design Vue is a Vue.js implementation of the Ant Design system, which is widely used in enterprise-level applications. It provides a comprehensive set of components and follows the Ant Design guidelines. Compared to BootstrapVue, Ant Design Vue offers a more enterprise-focused design and component set.
With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4.5 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup.
Support this project by becoming a sponsor.
Your logo will show up here with a link to your website. [Become a sponsor]
Thank you to all our backers! 🙏 [Become a backer]
This project exists thanks to all the people who contribute. [Contribute].
Released under the MIT License. Copyright (c) BootstrapVue.
FAQs
With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extens
The npm package bootstrap-vue receives a total of 189,610 weekly downloads. As such, bootstrap-vue popularity was classified as popular.
We found that bootstrap-vue demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.