bootstrap-vue

What is bootstrap-vue?

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.

What are bootstrap-vue's main functionalities?

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>

Other packages similar to bootstrap-vue

vuetify

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

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

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.

README

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.

Links

• 📘 Documentation
• 🔨 Release Notes
• 💬 Discord Chat
• 🐦 Twitter

Sponsors

Support this project by becoming a sponsor.

Your logo will show up here with a link to your website. [Become a sponsor]

Backers

Thank you to all our backers! 🙏 [Become a backer]

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Partners

License

Released under the MIT License. Copyright (c) BootstrapVue.