Components
BootstrapVueNext components list.
Build vertically collapsing accordions in combination with
BCollapse component.Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
The
BApp component is the new recommended way to configure bootstrap-vue-next. It replaces the plugin-based approach and provides better defaults management, orchestrator integration, and improved type safety.Avatars are a custom component, and are typically used to display a user profile as a picture or short text.
BAvatar provides several props for customizing its appearance such as color variant and roundness, and optionally supports acting as a button, link, or a router link.
Documentation and examples for badges, our small count and labeling component.
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Use Bootstrap's custom
BButton component for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.Group a series of buttons together on a single line or stack them in a vertical column with
BButtonGroup.Group a series of button-groups and/or input-groups together on a single line, with support for sizing, justification, and mixing different control types.
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
The carousel is a slideshow for cycling through a series of content. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
Nested carousels are not supported. You should also be aware that carousels in general can often cause usability and accessibility challenges.
Easily toggle visibility of almost any content on your pages in a vertically collapsing container. Includes support for making accordions. Visibility can be easily toggled with our
v-b-toggle directive, or via v-model.
Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.
BootstrapVueNext form component and helper components that optionally support inline form styles and validation states. Pair them up with other BootstrapVueNext form control components for an easy customized, and responsive, layout with a consistent look and feel.
For cross browser consistency,
BFormCheckboxGroup and BFormCheckbox use Bootstrap's custom checkbox input to replace the browser default checkbox input. It is built on top of semantic and accessible markup, so it is a solid replacement for the default checkbox input.File input control that supports single and multiple file modes, drag and drop, file type restrictions, and directory selection with contextual state feedback.
The
BFormGroup component is the easiest way to add some structure to forms. Its purpose is to pair form controls with a legend or label, and to provide help text and invalid/valid feedback text, as well as visual (color) contextual state feedback.Create various type inputs such as:
text, password, number, url, email, search, range, date and more.For cross browser consistency,
BFormRadioGroup and BFormRadio uses Bootstrap's custom radio input to replace the browser default radio input. It is built on top of semantic and accessible markup, so it is a solid replacement for the default radio input.Custom star rating component for entering or displaying rating values. Fully WAI-ARIA accessible with keyboard control, supporting both interactive and readonly modes with customizable styling and icons.
Bootstrap custom
<select> using custom styles. Optionally specify options based on an array, array of objects, or an object.The Form SpinButton allows the user to adjusting a numeric range with finite control
Lightweight custom tagged input form control, with options for customized interface rendering, duplicate tag detection and optional tag validation.
Create multi-line text inputs with support for auto height sizing, minimum and maximum number of rows, and contextual states.
Use the powerful mobile-first flexbox grid (via the
<BContainer>, <BRow> and <BCol> components) to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, CSS Sass variables and mixins, and dozens of predefined classes.
Documentation and examples for opting images (via
BImg component) into responsive behavior (so they never become larger than their parent elements), optionally adding lightweight styles to them — all via props.Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
Use BootstrapVue's custom b-link component for generating a standard
<a> link or RouterLink. BLink supports the disabled state and click event propagation.List Groups are a flexible and powerful component for displaying a series of content. List Group items can be modified to support just about any content within. They can also be used as navigation via various props.
Modals are streamlined, but flexible dialog prompts. They support a number of use cases from user notification to completely custom content and feature a handful of helpful sub-components, sizes, variants, accessibility, and more.
Navigation available in Bootstrap share general markup and styles, from the base
<BNav> class to the active and disabled states. Swap modifier props to switch between each style.
The component
BNavbar is a wrapper that positions branding, navigation, and other elements into a concise header. It is easily extensible and thanks to the BCollapse component, it can easily integrate responsive behaviors.Build hidden sidebars into your project. Sidebars can aid in enhancing user interaction or preventing further interaction.
The
BOrchestrator component manages the rendering and positioning of dynamic components like modals, toasts, and popovers. It works with BApp to provide a centralized orchestration layer.BootstrapVueNext's custom
BOverlay component is used to visually obscure a particular element or component and its content. It signals a state change within the element or component to the user and can be used for creating loaders, warnings/alerts, prompts, and more.Quick first, previous, next, last, and page buttons for pagination control of another component (such as
BTable or lists).
Placeholders are components that allows you to display a loading state for several component types while your data is being fetched or computed.
The Popover feature, which provides a tooltip-like behavior, can be easily applied to any interactive element via the
<BPopover> component or v-b-popover directive. Popovers can also be created and programmatically controlled via the composable usePopover
Use our custom progress component for displaying simple or complex progress bars, featuring support for horizontally stacked bars, animated backgrounds, and text labels.
The
<BSpinner> component can be used to show the loading state in your projects. They're rendered only with basic HTML and CSS as a lightweight Vue component. Their appearance, alignment, and sizing can be easily customized with a few built-in props and/or Bootstrap v5 utility classes.
For displaying tabular data,
BTable supports pagination, filtering, sorting, custom rendering, various style options, events, and asynchronous data. For simple display of tabular data without all the fancy features, BootstrapVueNext provides two lightweight alternative components BTableLite and BTableSimple.Create a widget of tabbable panes of local content. The tabs component is built upon navs and cards internally, and provides full keyboard navigation control of the tabs.
Push notifications to your visitors with
BToast, useToast and BOrchestrator. These are easily customizable for generating alert messages.Easily add tooltips to an interactive element or component via the
<BTooltip> component or v-b-tooltip directive. Tooltips can also be created and programmatically controlled via the composable usePopover