Bootstrap 5 Quick Snippets installs statistics

Bootstrap 5 Quick Snippet - Build Bootstrap UI in secs.

Simple yet effective Quick snippet extension for Visual Studio Code (VSCode). It contains 180 code snippets to build Bootstrap UI faster. This plugin works both in the stable & the insiders build.

Idea

Inspired from Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets plugin. We thought it would be cool if we have only Bootstrap 5 snippets. So created it.

Help

The detailed list of supported template triggers are listed below

Would you like to watch a quick tutorial on Youtube?

Feel free to let me know what else you want to be added via the issues

Suggestions, feedback, and other comments welcome via @anbuselvanrocky on Twitter.

Installation (in 2 easy steps)

1. Install plugin 2. Press F1, paste ext install bootstrap5-vscode & then press enter (or) 3. Go to extensions by pressing Ctrl-Shift-X (Windows/Linux) or Cmd-Shift-X (Mac) & Search for Bootstrap 5 Quick Snippets, click on install 4. Reload your editor

You are good to go.

Usage

To use the bootstrap snippets, open an HTML file, and start typing b5-, followed by pressing Ctrl+Space. A list of bootstrap snippets will show up

The detailed list of supported actions are listed below under the documentation section

Here are the conventions that will make it easy to lookup templates

If a template trigger starts with @ variation, this snippet targets the attribute of an HTML element in your markup. Think of @ as HTML attribute

Mind map

@ => Targets HTML attribute

🤖 Changelog

We do track all our changes in our changelog. Check the changelog here

📝 How to Contribute?

Make the snippet more cool by contributing. Contributing instructions here

📃 Documentation - Bootstrap 5 snippets

| Trigger | Description |

| bs5-$ | Bs5 $ | | bs5-accordion-default | Bs5 Accordion Default | | bs5-accordion-flush | Bs5 Accordion Flush | | bs5-alert-additional-content | Bs5 Alert Additional Content | | bs5-alert-closable | Bs5 Alert Closable | | bs5-alert-default | Bs5 Alert Default | | bs5-alert-dismissible | Bs5 Alert Dismissible | | bs5-alert-link | Bs5 Alert Link | | bs5-badge-button | Bs5 Badge Button | | bs5-badge-default | Bs5 Badge Default | | bs5-badge-heading | Bs5 Badge Heading | | bs5-badge-link | Bs5 Badge Link | | bs5-badge-pill | Bs5 Badge Pill | | bs5-badge-positioned | Bs5 Badge Positioned | | bs5-badge-positionedGeneric | Bs5 Badge PositionedGeneric | | bs5-bgroup-checkbox | Bs5 Bgroup Checkbox | | bs5-bgroup-default | Bs5 Bgroup Default | | bs5-bgroup-dropdown | Bs5 Bgroup Dropdown | | bs5-bgroup-dropdown-vertical | Bs5 Bgroup Dropdown Vertical | | bs5-bgroup-radio | Bs5 Bgroup Radio | | bs5-bgroup-size | Bs5 Bgroup Size | | bs5-bgroup-toolbar | Bs5 Bgroup Toolbar | | bs5-breadcrumb-default | Bs5 Breadcrumb Default | | bs5-breadcrumb-list | Bs5 Breadcrumb List | | bs5-button-a | Bs5 Button A | | bs5-button-block | Bs5 Button Block | | bs5-button-checkbox | Bs5 Button Checkbox | | bs5-button-default | Bs5 Button Default | | bs5-button-disabled-a | Bs5 Button Disabled A | | bs5-button-input | Bs5 Button Input | | bs5-button-outline | Bs5 Button Outline | | bs5-button-radio | Bs5 Button Radio | | bs5-button-sizes | Bs5 Button Sizes | | bs5-button-toggle | Bs5 Button Toggle | | bs5-card-align | Bs5 Card Align | | bs5-card-background | Bs5 Card Background | | bs5-card-background-custom | Bs5 Card Background Custom | | bs5-card-blockquote | Bs5 Card Blockquote | | bs5-card-border | Bs5 Card Border | | bs5-card-default | Bs5 Card Default | | bs5-card-grid | Bs5 Card Grid | | bs5-card-groups | Bs5 Card Groups | | bs5-card-head-foot | Bs5 Card Head Foot | | bs5-card-horizontal | Bs5 Card Horizontal | | bs5-card-links | Bs5 Card Links | | bs5-card-list | Bs5 Card List | | bs5-card-overlay | Bs5 Card Overlay | | bs5-card-pill-head | Bs5 Card Pill Head | | bs5-card-placeholder | Bs5 Card Placeholder | | bs5-card-subtitle | Bs5 Card Subtitle | | bs5-card-tab-head | Bs5 Card Tab Head | | bs5-carousel-caption | Bs5 Carousel Caption | | bs5-carousel-default | Bs5 Carousel Default | | bs5-collapse-button | Bs5 Collapse Button | | bs5-collapse-default | Bs5 Collapse Default | | bs5-dropdown-alignment | Bs5 Dropdown Alignment | | bs5-dropdown-anchor | Bs5 Dropdown Anchor | | bs5-dropdown-button | Bs5 Dropdown Button | | bs5-dropdown-colored | Bs5 Dropdown Colored | | bs5-dropdown-default | Bs5 Dropdown Default | | bs5-dropdown-sized | Bs5 Dropdown Sized | | bs5-dropdown-split | Bs5 Dropdown Split | | bs5-dropdown-up | Bs5 Dropdown Up | | bs5-dropdown-up-split | Bs5 Dropdown Up Split | | bs5-figure-default | Bs5 Figure Default | | bs5-form-checkbox | Bs5 Form Checkbox | | bs5-form-checkbox-inline | Bs5 Form Checkbox Inline | | bs5-form-checkbox-nolabel | Bs5 Form Checkbox Nolabel | | bs5-form-email | Bs5 Form Email | | bs5-form-file | Bs5 Form File | | bs5-form-floating | Bs5 Form Floating | | bs5-form-grid | Bs5 Form Grid | | bs5-form-group | Bs5 Form Group | | bs5-form-help-text | Bs5 Form Help Text | | bs5-form-help-text-inline | Bs5 Form Help Text Inline | | bs5-form-hidden | Bs5 Form Hidden | | bs5-form-inline | Bs5 Form Inline | | bs5-form-input | Bs5 Form Input | | bs5-form-input-sizing | Bs5 Form Input Sizing | | bs5-form-multi-select-custom | Bs5 Form Multi Select Custom | | bs5-form-password | Bs5 Form Password | | bs5-form-radio | Bs5 Form Radio | | bs5-form-radio-inline | Bs5 Form Radio Inline | | bs5-form-radio-nolabel | Bs5 Form Radio Nolabel | | bs5-form-reset | Bs5 Form Reset | | bs5-form-select-custom | Bs5 Form Select Custom | | bs5-form-submit | Bs5 Form Submit | | bs5-form-switch | Bs5 Form Switch | | bs5-form-textarea | Bs5 Form Textarea | | bs5-form-validation | Bs5 Form Validation | | bs5-grid-col | Bs5 Grid Col | | bs5-grid-container | Bs5 Grid Container | | bs5-grid-default | Bs5 Grid Default | | bs5-grid-row | Bs5 Grid Row | | bs5-igroup-button | Bs5 Igroup Button | | bs5-igroup-checkbox | Bs5 Igroup Checkbox | | bs5-igroup-dropdown-end | Bs5…

Description from the VS Code Marketplace listing.