Bootstrap 5 Quick Snippet - Build Bootstrap UI in secs.

Simple yet effective Quick snippet extension for Visual Studio Code (VSCode). It contains 172 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

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)
2. Goto extensions by pressing Ctrl-Shift-X (Windows/Linux) or Cmd-Shift-X (Mac) & Search for Bootstrap 5 Quick Snippets, click on install
3. 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

See here

Documentation

Here are available live templates

Bootstrap 5 snippets

Trigger	Description
bs5-$	Bootstrap master template
bs5-accordion-default	Accordion default
bs5-accordion-flush	Accordion flush
bs5-alert-additional-content	Alert additional content
bs5-alert-closable	Alert closable
bs5-alert-default	Alert default
bs5-alert-dismissible	Alert dismissible
bs5-alert-link	Alert link
bs5-badge-button	Badge button
bs5-badge-default	Badge default
bs5-badge-heading	Badge heading
bs5-badge-link	Badge link
bs5-badge-pill	Badge pill
bs5-bgroup-checkbox	Bgroup checkbox
bs5-bgroup-default	Bgroup default
bs5-bgroup-dropdown-vertical	Bgroup dropdown vertical
bs5-bgroup-dropdown	Bgroup dropdown
bs5-bgroup-radio	Bgroup radio
bs5-bgroup-size	Bgroup size
bs5-bgroup-toolbar	Bgroup toolbar
bs5-breadcrumb-default	Breadcrumb default
bs5-breadcrumb-list	Breadcrumb list
bs5-button-a	Button a
bs5-button-block	Button block
bs5-button-checkbox	Button checkbox
bs5-button-default	Button default
bs5-button-disabled-a	Button disabled a
bs5-button-input	Button input
bs5-button-outline	Button outline
bs5-button-radio	Button radio
bs5-button-sizes	Button sizes
bs5-button-toggle	Button toggle
bs5-card-align	Card align
bs5-card-background-custom	Card background custom
bs5-card-background	Card background
bs5-card-blockquote	Card blockquote
bs5-card-border	Card border
bs5-card-default	Card default
bs5-card-grid	Card grid
bs5-card-groups	Card groups
bs5-card-head-foot	Card head foot
bs5-card-links	Card links
bs5-card-list	Card list
bs5-card-overlay	Card overlay
bs5-card-pill-head	Card pill head
bs5-card-placeholder	Card placeholder
bs5-card-subtitle	Card subtitle
bs5-card-tab-head	Card tab head
bs5-carousel-caption	Carousel caption
bs5-carousel-default	Carousel default
bs5-collapse-button	Collapse button
bs5-collapse-default	Collapse default
bs5-dropdown-alignment	Dropdown alignment
bs5-dropdown-anchor	Dropdown anchor
bs5-dropdown-button	Dropdown button
bs5-dropdown-colored	Dropdown colored
bs5-dropdown-default	Dropdown default
bs5-dropdown-sized	Dropdown sized
bs5-dropdown-split	Dropdown split
bs5-dropdown-up-split	Dropdown up split
bs5-dropdown-up	Dropdown up
bs5-form-checkbox-custom	Form checkbox custom
bs5-form-checkbox-inline	Form checkbox inline
bs5-form-checkbox-nolabel	Form checkbox nolabel
bs5-form-checkbox	Form checkbox
bs5-form-email	Form email
bs5-form-file-custom	Form file custom
bs5-form-file	Form file
bs5-form-floating	Form floating
bs5-form-grid	Form grid
bs5-form-group-text	Form group text
bs5-form-group	Form group
bs5-form-help-text-inline	Form help text inline
bs5-form-help-text	Form help text
bs5-form-hidden	Form hidden
bs5-form-inline	Form inline
bs5-form-input-sizing	Form input sizing
bs5-form-input-text	Form input text
bs5-form-input	Form input
bs5-form-multi-select-custom	Form multi select custom
bs5-form-multi-select-sizing	Form multi select sizing
bs5-form-multi-select	Form multi select
bs5-form-password	Form password
bs5-form-radio-custom	Form radio custom
bs5-form-radio-inline	Form radio inline
bs5-form-radio-nolabel	Form radio nolabel
bs5-form-radio	Form radio
bs5-form-reset	Form reset
bs5-form-select-custom	Form select custom
bs5-form-select-sizing	Form select sizing
bs5-form-select	Form select
bs5-form-submit	Form submit
bs5-form-textarea	Form textarea
bs5-form-validation	Form validation
bs5-igroup-button	Igroup button
bs5-igroup-checkbox-radio	Igroup checkbox radio
bs5-igroup-dropdown-segmented	Igroup dropdown segmented
bs5-igroup-dropdown	Igroup dropdown
bs5-igroup-size	Igroup size
bs5-igroup-text-both	Igroup text both
bs5-igroup-text-prefix	Igroup text prefix
bs5-igroup-text-suffix	Igroup text suffix
bs5-jumbotron-default	Jumbotron default
bs5-jumbotron-fluid	Jumbotron fluid
bs5-list-a	List a
bs5-list-badge	List badge
bs5-list-button	List button
bs5-list-colors	List colors
bs5-list-custom	List custom
bs5-list-default	List default
bs5-modal-customize	Modal customize
bs5-modal-default	Modal default
bs5-modal-grid	Modal grid
bs5-modal-sizes	Modal sizes
bs5-nav-a	Nav a
bs5-nav-complete	Nav complete
bs5-nav-tabs-pills-a-variation	Nav tabs pills a variation
bs5-nav-tabs-pills-dropdown	Nav tabs pills dropdown
bs5-nav-tabs-pills-ul-variation	Nav tabs pills ul variation
bs5-nav-tabs	Nav tabs
bs5-nav-ul	Nav ul
bs5-navbar-background-color	Navbar background color
bs5-navbar-background	Navbar background
bs5-navbar-default	Navbar default
bs5-navbar-minimal-a	Navbar minimal a
bs5-navbar-minimal-ul	Navbar minimal ul
bs5-navbar-non-responsive	Navbar non responsive
bs5-navbar-offcanvas	Navbar offcanvas
bs5-navbar-placement	Navbar placement
bs5-pagination-alignment	Pagination alignment
bs5-pagination-default	Pagination default
bs5-pagination-sized	Pagination sized
bs5-popover-default	Popover default
bs5-popover-direction	Popover direction
bs5-popover-dismissible	Popover dismissible
bs5-progress-colored	Progress colored
bs5-progress-default	Progress default
bs5-progress-ie9	Progress ie9
bs5-progress-striped	Progress striped
bs5-scrollspy-default	Scrollspy default
bs5-scrollspy-nav	Scrollspy nav
bs5-tooltip-default	Tooltip default
bs5-figure-default	Figure default
bs5-image-default	Image default
bs5-table-default	Table default
bs5-table-special	Table special
bs5-typography-blockquote-reverse	Typography blockquote reverse
bs5-typography-blockquote	Typography blockquote
bs5-typography-description-list	Typography description list
bs5-typography-display-heading	Typography display heading
bs5-typography-lead	Typography lead
bs5-typography-list-inline	Typography list inline
bs5-typography-list-unstyled	Typography list unstyled
bs5-typography-muted-text	Typography muted text
bs5-grid-col	Grid col
bs5-grid-container-fluid	Grid container fluid
bs5-grid-container	Grid container
bs5-grid-default	Grid default
bs5-grid-row	Grid row
bs5-media-bottom	Media bottom
bs5-media-default	Media default
bs5-media-list	Media list
bs5-media-middle	Media middle
bs5-media-nesting	Media nesting
bs5-media-right	Media right
bs5-media-top	Media top
bs5-responsive-hide-down	Responsive hide down
bs5-responsive-hide-up	Responsive hide up
bs5-responsive-print-show	Responsive print show
css-comment-block	Comment block
fa5-cdn	Cdn
html-comment-block	Comment block

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

• html
• blade
• ejs
• handlebars
• latte
• php
• plaintext
• razor
• tpl
• typescript
• typescriptreact
• javascriptreact
• javascript
• twig
• vue
• vue-html
• django-html
• jinja-html
• erb
• HTML (Eex)
• volt
• nunjucks
• svelte

Authors

• Anbuselvan Rocky
• Special thanks to Ashok Koyi

License

MIT - (Do whatever you want)