If you would like to only pull in a specific component or set of components, you can do this by directly importing those components. When importing multiple component group and/or directive group plugins, include all imports in a single import statement for optimal tree shaking.

BVToastPlugin - provides the injection $bvToast for generating on demand toasts.BVModalPlugin - provides the injection $bvModal for generating message boxes.There are two additional helper plugins for providing the $bvModal and $bvToast injections (if you are not using the ModalPlugin or ToastPlugin plugins) which are available for import from 'bootstrap-vue': Refer to the component and directive documentation for details. Component shorthand aliases (if any) are also included in the plugin.

When importing, all the sub components are also included, as well all dropdown sub components. When importing as plugins, all subcomponents and related directives are imported in most cases. This imports all the layout components such as, , : import from 'bootstrap-vue' Without it, you may see some strange incomplete styling. HTML5 doctypeīootstrap requires the use of the HTML5 doctype.

Refer to the following sub-sections for details. Important HTML globalsīootstrap v4 CSS employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Many of the examples in this documentation are live and can be edited in-place for an enhanced learning experience (note some examples may not work in IE 11 due to use of ES6 JavaScript code in the sections).īootstrapVue also provides an interactive playground where you can experiment with the various components and export your results to JSFiddle, CodePen, and/or CodeSandbox. You can find information on these classes in the Utility Classes reference section. These are Bootstrap v4.6 utility classes that help control padding, margins, positioning and more. In many of the examples shown in BootstrapVue's documentation, you may see the use of CSS classes such as ml-2, py-1, etc.

Vue loader scoped CSS, if using scoped styles in SFC (Single File Component).

This BootstrapVue documentation assumes you are familiar with Vue and and Bootstrap v4 CSS.

Reference - Reference information and documentation.

Icons - Icons and icon plugin documentation v2.2.0+.

Directives - Directives and directive plugin documentation.

Components - Components and component plugin documentation.

If you are migrating from a previous v2.0.0-rc.# release, please see the v2.0.0 migration guide.

PortalVue v2.1 is required by Toasts, v2.1.7 is recommendedĬheck out what is new in BootstrapVue release v2.22.0.

Popper.js v1.16 is required for dropdowns (and components based on dropdown), tooltips, and popovers.

Bootstrap v4.3.1 is required, v4.6.1 is recommended.

Vue.js v2.6 is required, v2.6.12 is recommended.

Get started with BootstrapVue, based on the world's most popular framework - Bootstrap v4, for building responsive, mobile-first sites using Vue.js.

Visual studio code install bootstrap