Bootstrap 5 Quick Snippet - Build Bootstrap UI in secs.

license badge

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.

Plugin in action

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)

Install plugin
Press F1, paste ext install bootstrap5-vscode & then press enter (or)
Go to extensions by pressing Ctrl-Shift-X (Windows/Linux) or Cmd-Shift-X (Mac) & Search for Bootstrap 5 Quick Snippets, click on install
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 Igroup Dropdown End
bs5-igroup-dropdown-segmented-end	Bs5 Igroup Dropdown Segmented End
bs5-igroup-dropdown-segmented-start	Bs5 Igroup Dropdown Segmented Start
bs5-igroup-dropdown-start	Bs5 Igroup Dropdown Start
bs5-igroup-radio	Bs5 Igroup Radio
bs5-igroup-size	Bs5 Igroup Size
bs5-igroup-text-both	Bs5 Igroup Text Both
bs5-igroup-text-prefix	Bs5 Igroup Text Prefix
bs5-igroup-text-suffix	Bs5 Igroup Text Suffix
bs5-image-default	Bs5 Image Default
bs5-image-picture	Bs5 Image Picture
bs5-jumbotron-default	Bs5 Jumbotron Default
bs5-jumbotron-fluid	Bs5 Jumbotron Fluid
bs5-list-a	Bs5 List A
bs5-list-badge	Bs5 List Badge
bs5-list-button	Bs5 List Button
bs5-list-checkbox	Bs5 List Checkbox
bs5-list-colors	Bs5 List Colors
bs5-list-custom	Bs5 List Custom
bs5-list-default	Bs5 List Default
bs5-list-flush	Bs5 List Flush
bs5-list-horizontal	Bs5 List Horizontal
bs5-media-bottom	Bs5 Media Bottom
bs5-media-default	Bs5 Media Default
bs5-media-list	Bs5 Media List
bs5-media-middle	Bs5 Media Middle
bs5-media-nesting	Bs5 Media Nesting
bs5-media-right	Bs5 Media Right
bs5-media-top	Bs5 Media Top
bs5-modal-customize	Bs5 Modal Customize
bs5-modal-default	Bs5 Modal Default
bs5-modal-grid	Bs5 Modal Grid
bs5-modal-sizes	Bs5 Modal Sizes
bs5-modal-toggle	Bs5 Modal Toggle
bs5-nav-a	Bs5 Nav A
bs5-nav-complete	Bs5 Nav Complete
bs5-nav-tabs	Bs5 Nav Tabs
bs5-nav-tabs-pills-a-variation	Bs5 Nav Tabs Pills A Variation
bs5-nav-tabs-pills-dropdown	Bs5 Nav Tabs Pills Dropdown
bs5-nav-tabs-pills-ul-variation	Bs5 Nav Tabs Pills Ul Variation
bs5-nav-ul	Bs5 Nav Ul
bs5-navbar-background	Bs5 Navbar Background
bs5-navbar-background-color	Bs5 Navbar Background Color
bs5-navbar-default	Bs5 Navbar Default
bs5-navbar-minimal-a	Bs5 Navbar Minimal A
bs5-navbar-minimal-ul	Bs5 Navbar Minimal Ul
bs5-navbar-non-responsive	Bs5 Navbar Non Responsive
bs5-navbar-offcanvas	Bs5 Navbar Offcanvas
bs5-navbar-placement	Bs5 Navbar Placement
bs5-offcanvas-scrollableandbackdrop	Bs5 Offcanvas Scrollableandbackdrop
bs5-offcanvas-static	Bs5 Offcanvas Static
bs5-pagination-default	Bs5 Pagination Default
bs5-placeholder-default	Bs5 Placeholder Default
bs5-popover-default	Bs5 Popover Default
bs5-popover-direction	Bs5 Popover Direction
bs5-popover-dismissible	Bs5 Popover Dismissible
bs5-progress-colored	Bs5 Progress Colored
bs5-progress-default	Bs5 Progress Default
bs5-progress-ie9	Bs5 Progress Ie9
bs5-progress-multiple	Bs5 Progress Multiple
bs5-progress-striped	Bs5 Progress Striped
bs5-responsive-hide-down	Bs5 Responsive Hide Down
bs5-responsive-hide-up	Bs5 Responsive Hide Up
bs5-responsive-print-show	Bs5 Responsive Print Show
bs5-scrollspy-default	Bs5 Scrollspy Default
bs5-scrollspy-nav	Bs5 Scrollspy Nav
bs5-spinners-button	Bs5 Spinners Button
bs5-spinners-default	Bs5 Spinners Default
bs5-table-default	Bs5 Table Default
bs5-table-special	Bs5 Table Special
bs5-toast-default	Bs5 Toast Default
bs5-toast-stacked	Bs5 Toast Stacked
bs5-tooltip-default	Bs5 Tooltip Default
bs5-typography-blockquote	Bs5 Typography Blockquote
bs5-typography-description-list	Bs5 Typography Description List
bs5-typography-display-heading	Bs5 Typography Display Heading
bs5-typography-lead	Bs5 Typography Lead
bs5-typography-list-inline	Bs5 Typography List Inline
bs5-typography-list-unstyled	Bs5 Typography List Unstyled
bs5-typography-muted-text	Bs5 Typography Muted Text
css-comment-block	Css Comment Block
html-comment-block	Html Comment Block
icons-bootstrap-icons-cdn	Icons Bootstrap Icons Cdn
icons-fa6-cdn	Icons Fa6 Cdn

Commands

[ Experimental ] - Added new command "Open CyberDude YT Channel" that will open cyberdude channel from inside VSCode. Just press CTRL + P and type cyberdude it will open the CyberDude YouTube Channel and has the ability to visit cyberdude website as well. This feature is experimental and can be removed in the future.

Supported languages

Authors

Anbuselvan Rocky
Special thanks to Ashok Koyi

Contributors

Adam Kortus
Ugur y (Special Thanks)

License

MIT - (Do whatever you want)

Bootstrap 5 Quick Snippets

Anbuselvan Annamalai