Bootstrap 5 Quick Snippet - Build Bootstrap UI in secs.
Simple yet effective Quick snippet extension for Visual Studio Code (VSCode). It contains 179 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)
- 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-$ |
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-badge-positioned |
Badge positioned |
| bs5-badge-positionedGeneric |
Badge positionedgeneric |
| 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-horizontal |
Card horizontal |
| 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-inline |
Form checkbox inline |
| bs5-form-checkbox-nolabel |
Form checkbox nolabel |
| bs5-form-checkbox |
Form checkbox |
| bs5-form-email |
Form email |
| bs5-form-file |
Form file |
| bs5-form-floating |
Form floating |
| bs5-form-grid |
Form grid |
| 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 |
Form input |
| bs5-form-multi-select-custom |
Form multi select custom |
| bs5-form-password |
Form password |
| 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-submit |
Form submit |
| bs5-form-switch |
Form switch |
| bs5-form-textarea |
Form textarea |
| bs5-form-validation |
Form validation |
| bs5-igroup-button |
Igroup button |
| bs5-igroup-checkbox |
Igroup checkbox |
| bs5-igroup-dropdown-end |
Igroup dropdown end |
| bs5-igroup-dropdown-segmented-end |
Igroup dropdown segmented end |
| bs5-igroup-dropdown-segmented-start |
Igroup dropdown segmented start |
| bs5-igroup-dropdown-start |
Igroup dropdown start |
| bs5-igroup-radio |
Igroup radio |
| 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-checkbox |
List checkbox |
| bs5-list-colors |
List colors |
| bs5-list-custom |
List custom |
| bs5-list-default |
List default |
| bs5-list-flush |
List flush |
| bs5-list-horizontal |
List horizontal |
| bs5-modal-customize |
Modal customize |
| bs5-modal-default |
Modal default |
| bs5-modal-grid |
Modal grid |
| bs5-modal-sizes |
Modal sizes |
| bs5-modal-toggle |
Modal toggle |
| 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-offcanvas-scrollableandbackdrop |
Offcanvas scrollableandbackdrop |
| bs5-offcanvas-static |
Offcanvas static |
| bs5-pagination-default |
Pagination default |
| bs5-placeholder-default |
Placeholder default |
| 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-multiple |
Progress multiple |
| bs5-progress-striped |
Progress striped |
| bs5-scrollspy-default |
Scrollspy default |
| bs5-scrollspy-nav |
Scrollspy nav |
| bs5-spinners-button |
Spinners button |
| bs5-spinners-default |
Spinners default |
| bs5-toast-default |
Toast default |
| bs5-toast-stacked |
Toast stacked |
| bs5-tooltip-default |
Tooltip default |
| bs5-figure-default |
Figure default |
| bs5-image-default |
Image default |
| bs5-image-picture |
Image picture |
| bs5-table-default |
Table default |
| bs5-table-special |
Table special |
| 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 |
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 |
| fa6-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
Authors
Contributors
License
MIT - (Do whatever you want)
