Vue2 Bootstrap v4
Twitter Bootstrap 4 Components For Vue.js 2
Quick Start
Demo Examples and Bundled Version Are Comming Soon! Stay Tuned ... (See #1)
Install via NPM:
npm i vue2-bootstrap4
// Globally register bootstrap-vue components;;Vue;
Note: You will need ES6 babel transformer and scss loader in your Webpack config file to support ES6 syntax. You can then use component in your html, like so:
Hello
Components
Alert
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Usage
This is an alert
Accordion
Extend the default collapse behavior to create an accordion. It requires both target
and target-group
attributes for this to work.
Usage
<!-- item 1 --> Collapsible Group Item #1 First 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. <!-- item 2 --> Collapsible Group Item #2 Second 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. <!-- item 3--> Collapsible Group Item #3 Third 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.
Breadcrumb
Indicate the current page’s location within a navigational hierarchy.
Usage
Button Checkbox
Allows to elect one or more items in the nested group of buttons.
Usage
Button Group
Group a series of buttons together on a single line with the button group.
Usage
Left Middle Right
Button Radio
Allows to select only one item out of a group of buttons.
Usage
Buttons
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.
Usage
<!-- colour variants -->PrimarySecondarySuccessWarningDanger <!-- outlined variants -->PrimarySecondarySuccessWarningDanger <!-- button types -->Button LinkDisabledBlock
Card
A card is a flexible and extensible content container.
Usage
Card title Some quick example text to build on the card title and make up the bulk of the card's content.
Carousel
Usage
Collapse
Click the buttons below to show and hide another element. It requires either target
or target-group
attribute for this to work.
Usage
<!-- triggers --> Toogle first Toogle second Toogle all <!-- item 1 --> First 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. <!-- item 2 --> Second 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.
Dropdown
Dropdowns are toggleable, contextual overlays for displaying lists of links.
Usage
Completed Pending
Dropdown Select
Dropdown select allows to select an item from the list and update the model.
Usage
Form Checkbox
A Checkbox input for selection of one or more items.
Usage
Form Input
A textual input.
Usage
Form Radio
A radio input for selection of only one item.
Usage
Form Select
A textual input.
Usage
Form textarea
A textarea input.
Usage
Images
Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
Usage
Jumbotron
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
Usage
Hello, world! This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. It uses utility classes for typography and spacing to space content out within the larger container. Learn more
List Group
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
Usage
14 Cras justo odio 2 Dapibus ac facilisis in 1 Morbi leo risus
Media
The media object is an abstract element used as the basis for building more complex and repetitive components (like blog comments, Tweets, etc).
Usage
Media heading 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.
Modal
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Usage
<!-- trigger --> Show Modal <!-- modal --> header body OK
Nav
Roll your own navigation style by extending the base .nav component.
Usage
Active Link Another Link Disabled
Navbar
The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header.
Usage
Navbar Home (current) Features Pricing About Search
Pager
Quick previous and next links for simple pagination implementations with light markup and styles. It’s great for simple sites like blogs or magazines.
Usage
Previous Next Older Newer
Pagination
Provide pagination links for your site or app with the multi-page pagination component.
Usage
Popover
Add small overlay content to any element for housing secondary information. Popover rely on on the 3rd party library tether for positioning.
Usage
<!-- tooltip with a text --> popover top <!-- tooltip with an html content --> popover right (html) Lorem ipsum dolor.
Progress
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Usage
25%
Tables
For tabular data.
Usage
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
Tabs
Usage
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, quidem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, corporis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, architecto, maiores.
Tags/Badges
Small and adaptive tag for adding context to just about any content.
Usage
open
Tooltip
Add small overlay content to any element for housing secondary information. Tooltips rely on on the 3rd party library tether for positioning.
Usage
<!-- tooltip with a text --> tooltip top <!-- tooltip with an html content --> tooltip right (html) tooltip right (italic)
Demo [Coming Soon!]
Meanwhile, you can see demos from 1.x version docs from kzima,
every thing is almost same except all tag prefixes are changed from vs-*
to b-*
:)
See here for 1.x Demo
/Bootstrap Vue
- This Project and Docs was originally ported from vue 1.x version kzima/vuestrap-base-components , So original credit backs to him :)