Install via NPM:
npm i --save-dev bootstrap-vue
Install via YARN (recommended):
yarn add --dev bootstrap-vue
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue';
// Globally register bootstrap-vue components
Vue.use(BootstrapVue);Or simply include js inside HTML templates: (CDN Powered by unpkg)
<script src="https://unpkg.com/bootstrap-vue/dist/bootstrapVue.js"></script>You can then use component in your html, like so:
<b-alert>Hello</b-alert>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
<b-alert
:show="showVariable"
:state="state"
dismissible>
This is an alert
</b-alert>Extend the default collapse behavior to create an accordion. It requires both target and target-group attributes for this to work.
<!-- item 1 -->
<b-collapse-toggle target="item-1" target-group="accordion-1">
<div><a href="#">Collapsible Group Item #1</a></div>
</b-collapse-toggle>
<b-collapse id="item-1" group="accordion-1">
<div class="card card-block">
<h5>First</h5>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</b-collapse>
<!-- item 2 -->
<b-collapse-toggle target="item-2" target-group="accordion-1">
<div><a href="#">Collapsible Group Item #2</a></div>
</b-collapse-toggle>
<b-collapse id="item-2" group="accordion-1">
<div class="card card-block">
<h5>Second</h5>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</b-collapse>
<!-- item 3-->
<b-collapse-toggle target="item-3" target-group="accordion-1">
<div><a href="#">Collapsible Group Item #3</a></div>
</b-collapse-toggle>
<b-collapse id="item-3" group="accordion-1">
<div class="card card-block">
<h5>Third</h5>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</b-collapse>Indicate the current page’s location within a navigational hierarchy.
<b-breadcrumb
:list: "[{text: 'Home', link: '#', active: true}, {text: 'Library', active: false}]">
</b-breadcrumb>Allows to elect one or more items in the nested group of buttons.
<b-button-checkbox
:model.sync="model"
:list.sync=" [{
text: 'First',
value: 'first',
}, {
text: 'Second',
value: 'second',
}, {
text: 'Third',
value: 'third',
}]"
size="md"
variant="primary"
return-object>
</b-button-checkbox>Group a series of buttons together on a single line with the button group.
<b-button-group vertical>
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>Allows to select only one item out of a group of buttons.
<b-button-radio
:model.sync="model"
:list="[{
text: 'First',
value: 'first',
}, {
text: 'Second',
value: 'second',
}, {
text: 'Third',
value: 'third',
}]"
size="md"
variant="primary"
return-boject>
</b-button-radio>Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
<!-- colour variants -->
<b-btn size="md" variant="primary">Primary</b-btn>
<b-btn size="md" variant="secondary">Secondary</b-btn>
<b-btn size="md" variant="success">Success</b-btn>
<b-btn size="md" variant="warning">Warning</b-btn>
<b-btn size="md" variant="danger">Danger</b-btn>
<!-- outlined variants -->
<b-btn size="md" variant="primary-outline">Primary</b-btn>
<b-btn size="md" variant="secondary-outline">Secondary</b-btn>
<b-btn size="md" variant="success-outline">Success</b-btn>
<b-btn size="md" variant="warning-outline">Warning</b-btn>
<b-btn size="md" variant="danger-outline">Danger</b-btn>
<!-- button types -->
<b-btn size="md" variant="link" link="#">Button Link</b-btn>
<b-btn size="md" variant="primary" disabled>Disabled</b-btn>
<b-btn size="md" variant="primary" block>Block</b-btn>A card is a flexible and extensible content container.
<b-card variant="default" type="default" align="left">
<img class="card-img img-fluid" src="https://placehold.it/350x150" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</b-card><b-carousel :interval="5000" :controls="false" :indicators="false">
<b-slide>
<img src="http://placehold.it/1200x400?text=one">
</b-slide>
<b-slide>
<img src="http://placehold.it/1200x400?text=two">
</b-slide>
<b-slide>
<img src="http://placehold.it/1200x400?text=three">
</b-slide>
</b-carousel>Click the buttons below to show and hide another element. It requires either target or target-group attribute for this to work.
<!-- triggers -->
<b-collapse-toggle target="collapse-1">
<button class="btn btn-default">Toogle first</button>
</b-collapse-toggle>
<b-collapse-toggle target="collapse-2">
<button class="btn btn-default">Toogle second</button>
</b-collapse-toggle>
<b-collapse-toggle target-group="group-1">
<button class="btn btn-default">Toogle all</button>
</b-collapse-toggle>
<!-- item 1 -->
<b-collapse id="collapse-1" group="group-1">
<div class="card card-block">
<h5>First</h5>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</b-collapse>
<!-- item 2 -->
<b-collapse id="collapse-2" group="group-1">
<div class="card card-block">
<h5>Second</h5>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</b-collapse>Dropdowns are toggleable, contextual overlays for displaying lists of links.
<b-dropdown
text="Action"
size="md"
variant="primary"
:arrow="arrow"
:caret="false"
dropup>
<ul class="dropdown-menu dropdown-menu-left">
<li><a class="dropdown-item" href="#">Completed</a></li>
<li><a class="dropdown-item" href="#">Pending</a></li>
</ul>
</b-dropdown>Dropdown select allows to select an item from the list and update the model.
<b-dropdown-select
:list="[
{
text: 'First',
value: 'first',
}, {
text: 'Second',
value: 'second',
}, {
text: 'Third',
value: 'third',
}]"
:model.sync="model"
size="md"
variant="primary"
position="left"
default-text="Action"
:force-default="false"
:caret="false"
dropup
return-object>
</b-dropdown-select>A Checkbox input for selection of one or more items.
<b-form-checkbox
:list.sync="[{
text: 'First',
value: 'first',
}, {
text: 'Second',
value: 'second',
}, {
text: 'Third',
value: 'third',
disabled: true
}]"
:state="'default'"
:custom="false"
vertical
return-object>
</b-form-checkbox>A textual input.
<b-form-input
:model.sync="model"
type="text"
label="Example Label"
placeholder="Placeholder"
description="We'll never share your email with anyone else."
size="md"
:state="'success'"
state-icon>
</b-form-input>A radio input for selection of only one item.
<b-form-radio
:model.sync="model"
:list="[
{
name: 'First',
value: 'first',
}, {
name: 'Second',
value: 'second',
}, {
name: 'Third (disabled)',
value: 'third',
disabled: true,
}]"
:state="'success'"
:custom="false"
vertical
return-object>
</b-form-radio>A textual input.
<b-form-select
:model.sync="model"
:options="options"
:default-option="{text: 'Please select one',value: 'default'}"
type="text"
label="Example Label"
description="We'll never share your gender with anyone else."
size="md"
:state="'success'">
</b-form-select>A textarea input.
<b-form-textarea
:model.sync="model"
type="text"
label="Example Label"
description="Extra textarea description."
rows="2"
:state="'success'">
</b-form-textarea>Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
<img src="http://placehold.it/150x150?text=150x150" alt="..." class="img-rounded">
<img src="http://placehold.it/150x150?text=150x150" alt="..." class="img-circle">
<img src="http://placehold.it/150x150?text=150x150" alt="..." class="img-thumbnail">
<img src="http://placehold.it/1000x150?text=1000x150 - responsive" alt="..." class="img-fluid" >A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
<b-jumbotron fluid>
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="m-y-md">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</b-jumbotron>List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
<b-list-group flush>
<b-list-group-item state="success">
<b-badge type="pill" class="pull-xs-right">14</b-badge>
Cras justo odio
</b-list-group-item>
<b-list-group-item>
<b-badge type="pill" class="pull-xs-right">2</b-badge>
Dapibus ac facilisis in
</b-list-group-item>
<b-list-group-item>
<b-badge type="pill" class="pull-xs-right">1</b-badge>
Morbi leo risus
</b-list-group-item>
</b-list-group>The media object is an abstract element used as the basis for building more complex and repetitive components (like blog comments, Tweets, etc).
<b-media position="top left">
<div slot="aside">
<a href="#">
<img class="media-object" src="http://placehold.it/50x50?text=media">
</a>
</div>
<div slot="body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</b-media>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
<!-- trigger -->
<b-button variant="primary" v-on:click="$root.$emit('show::modal', 'modal1')">
Show Modal
</b-button>
<!-- modal -->
<b-modal id="modal1" size="md" :fade="false">
<div slot="modal-header">
<h3>header</h3>
</div>
<div slot="modal-body">
body
</div>
<div slot="modal-footer">
<button class="btn btn-primary" v-on:click="$root.$emit('hide::modal', 'modal1')">
OK
</button>
</div>
</b-modal>Roll your own navigation style by extending the base .nav component.
<b-nav type="default" :vertical="false">
<b-nav-item link="#" active>Active</b-nav-item>
<b-nav-item link="#">Link</b-nav-item>
<b-nav-item link="#">Another Link</b-nav-item>
<b-nav-item link="#" disabled>Disabled</b-nav-item>
</b-nav>The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header.
<b-navbar fixed="top" type="light" variant="default" full>
<a class="navbar-brand" href="#">Navbar</a>
<b-nav type="navbar" class="pull-xs-left">
<b-nav-item link="#" active>Home <span class="sr-only">(current)</span></b-nav-item>
<b-nav-item link="#">Features</b-nav-item>
<b-nav-item link="#">Pricing</b-nav-item>
<b-nav-item link="#">About</b-nav-item>
</b-nav>
<form class="form-inline navbar-form pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
</b-navbar>Quick previous and next links for simple pagination implementations with light markup and styles. It’s great for simple sites like blogs or magazines.
<b-pager>
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</b-pager>
<hr>
<b-pager>
<li class="pager-prev"><a href="#">Older</a></li>
<li class="pager-next"><a href="#">Newer</a></li>
</b-pager>Provide pagination links for your site or app with the multi-page pagination component.
<b-pagination
size="md"
variant="primary"
:total-rows="100"
:current-page="currentPageVariable"
:per-page="10">
</b-pagination>Add small overlay content to any element for housing secondary information. Popover rely on on the 3rd party library tether for positioning.
<!-- tooltip with a text -->
<b-popover title="title" text="Lorem ipsum dolor." position="top">
<button class="btn">popover top</button>
</b-popover>
<!-- tooltip with an html content -->
<b-popover title="title" position="right">
<button class="btn">popover right (html)</button>
<em slot="content">Lorem ipsum dolor.</em>
</b-popover>Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
<b-progress
variant="primary"
value="25"
striped>
25%
</b-progress>For tabular data.
<b-tables hover responsive>
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</b-tables><b-tabs size="md" :fade="false">
<b-tab id="tab-1" title="Tab 1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, quidem!</b-tab>
<b-tab id="tab-2" title="Tab 2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, corporis?</b-tab>
<b-tab id="tab-2" title="Tab 3" disabled>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, architecto, maiores.</b-tab>
</b-tabs>Small and adaptive tag for adding context to just about any content.
<b-badge variant="default" type="pill">open</b-badge>Add small overlay content to any element for housing secondary information. Tooltips rely on on the 3rd party library tether for positioning.
<!-- tooltip with a text -->
<b-tooltip
text="tooltip top"
position="top"
:triggers="['hover']">
<button class="btn">tooltip top</button>
</b-tooltip>
<!-- tooltip with an html content -->
<b-tooltip position="right">
<button class="btn">tooltip right (html)</button>
<em slot="content">tooltip right (italic)</em>
</b-tooltip>