This extension covers absolutely all components of Bootstrap 4 with several examples per component, it will allow you to code faster and rather focus on your code.
Source code | Snippets list | Report bug or suggestion
| Component | Trigger | Description |
|---|---|---|
| Alert | b-alert | Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. |
b-alert-closable | Alert with close button to dismiss it. | |
b-alert-paragraph | Alert that contain additional HTML elements like headings, paragraphs and dividers. | |
| Badge | b-badge | Small count and labeling component. |
b-badge-link | Badge as a link element for providing actionable badges with hover and focus states. | |
b-badge-pill | Badge more rounded. | |
| Breadcrumb | b-breadcrumb | Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. |
| Button | b-btn | Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. |
b-btn-block | Button that span the full width of a parent. | |
b-btn-check | Button check. | |
b-btn-lg | Button with large size. | |
b-btn-outline | Button Outline. | |
b-btn-radio | Button radio. | |
b-btn-sm | Button with small size. | |
b-btn-toggle | Button toggle. | |
| Button group | b-btn-group | Group a series of buttons together on a single line with the button group, and super-power them with JavaScript. |
b-btn-group-lg | Button group of large size. | |
b-btn-group-sm | Button group of small size. | |
b-btn-group-vertical | Button group vertically stacked. | |
b-btn-toolbar | Combine sets of button groups into button toolbars for more complex components. | |
| Card | b-card | Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. |
b-card-group | Cards as a single, attached element with equal width and height columns. | |
b-card-group-grid | Card group with which you can control how many grid columns (wrapped around your cards) to show per row. | |
b-card-group-masonry | Card group organized into Masonry-like columns. | |
b-card-horizontal | Card horizontal aligned. | |
b-card-img-overlay | Card with image as background and overlayed text. | |
b-card-header-footer | Card with header and footer. | |
| Carousel | b-carousel | A slideshow component for cycling through elements—images or slides of text—like a carousel. |
b-carousel-fade | Carousel animated by fade transition instead of a slide. | |
| Collapse | b-accordion | Accordion control using collapse behavior and cards. |
b-collapse | Toggle the visibility of content across your project with a few classes and our JavaScript plugins. | |
| Dropdown | b-dropdown | Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. |
b-dropdown-form | Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require. | |
b-dropdown-left | Trigger dropdown menus at the left of the elements. | |
b-dropdown-link | Dropdown triggered from a link. | |
b-dropdown-right | Trigger dropdown menus at the right of the elements. | |
b-dropdown-toggle-split | Dropdown with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret. | |
b-dropdown-up | Trigger dropdown menus above elements. | |
| Form | b-form | Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. |
b-form-control-check | Form control check. | |
b-form-control-file | Form control file. | |
b-form-control-input | Form control input. | |
b-form-control-lg | Form control large. | |
b-form-control-radio | Form control radio. | |
b-form-control-range | Form control range. | |
b-form-control-select | Form control select. | |
b-form-control-select-multiple | Form control select multiple. | |
b-form-control-sm | Form control small. | |
b-form-control-textarea | Form control textarea. | |
b-form-custom-check | Form custom check control. | |
b-form-custom-file | Form custom file control. | |
b-form-custom-radio | Form custom radio control. | |
b-form-custom-range | Form custom range control. | |
b-form-custom-select | Form custom select control. | |
b-form-custom-select-multiple | Form custom select multiple control. | |
b-form-custom-switch | Form custom switch control. | |
b-form-layout-grid | Bootstrap’s form with complex layout created with the grid system.. | |
b-form-horizontal | Bootstrap’s form Horizontally aligned. | |
b-form-inline | Bootstrap’s form inline aligned. | |
| Input group | b-input-group | Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. |
b-input-group-append | Input group with addon in the right. | |
b-input-group-addon-button | Input group with button addon. | |
b-input-group-addon-dropdowns | Input group with dropdowns addon. | |
b-input-group-lg | Input group large size. | |
b-input-group-multiple-addons | Input group with multiple addons. | |
b-input-group-multiple-inputs | Input group with multiple inputs. | |
b-input-group-addon-segbuttons | Input group with segmented-buttons addon. | |
b-input-group-sm | Input group small size. | |
| Jumbotron | b-jumbotron | Lightweight, flexible component for showcasing hero unit style content. |
b-jumbotron-fluid | Jumbotron that occupies the entire horizontal space of its parent. | |
| List group | b-list-group | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. |
b-list-group-buttons | List groups with items as buttons. | |
b-list-group-horizontal | List groups with horizontal alignment. | |
b-list-group-links | List groups with items as links. | |
b-list-group-tabs | Extend our list group to create tabbable panes of local content. | |
| Media object | b-media | Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like. |
b-media-list | Media object with medias structured as a list. | |
b-media-nested | Media object with nested medias. | |
| Modal | b-modal | Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. |
b-modal-centered | Modal vertically centered. | |
b-modal-xl | Modal extra-large size (max-width: 1140px). | |
b-modal-lg | Modal large size (max-width: 800px). | |
b-modal-scrollable | Modal with scrollbar in the body section, for large content. | |
b-modal-sm | Modal small size (max-width: 300px). | |
b-modal-static-backdrop | Modal with static backdrop (not closable by clicking outside it). | |
| Nav | b-nav | Bootstrap’s navigation component. |
b-nav-pills | Bootstrap’s navigation pills style. | |
b-nav-pills-vertical | Bootstrap’s navigation vertical pills style. | |
b-nav-tabs | Bootstrap’s navigation tabs style. | |
| Navbar | b-navbar | Responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. |
| Pagination | b-pagination | Indicate a series of related content exists across multiple pages. |
| Popover | b-popover | Add bootstrap popovers, like those found in iOS, to any element on your site. |
| Progress | b-progress | Progress bar component. |
b-progress-animated | Progress striped and animated. | |
b-progress-multiple | Progress with multiple progress bars. | |
| Scrollspy | b-scrollspy-listgroup | Scrollspy with .list-group. |
b-scrollspy-navbar | Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport. | |
b-scrollspy-navbar-nested | Scrollspy with nested navbar. | |
| Spinner | b-spinner | Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript. |
b-spinner-growing | Spinner with growing animation effect. | |
b-spinner-growing-sm | Smaller growing spinner that can quickly be used within other components. | |
b-spinner-sm | Smaller spinner that can quickly be used within other components. | |
| template | b-template | Template for bootstrap web page. |
b-template-starter | Starter template for bootstrap web page. | |
| Toast | b-toast | Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. |
| Tooltip | b-tooltip | bootstrap custom tooltip. |
Bootstrap4code - Visual studio code plugin is open-sourced software licensed under the MIT license.