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.
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.
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.
- Install plugin
2 Press
F1, pasteext install bootstrap5-vscode& then pressenter(or) - Goto extensions by pressing
Ctrl-Shift-X(Windows/Linux) orCmd-Shift-X(Mac) & Search forBootstrap 5 Quick Snippets, click on install - Reload your editor
You are good to go.
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
@ => Targets HTML attribute
See here
Here are available live templates
| 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 |
- [ Experimental ] - Added new command "
Open CyberDude YT Channel" that will open cyberdude channel from insideVSCode. Just pressCTRL + Pand typecyberdudeit will open theCyberDude YouTube Channeland has the ability to visitcyberdude websiteas well. This feature is experimental and can be removed in the future.
- 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
- Anbuselvan Rocky
- Special thanks to Ashok Koyi
MIT - (Do whatever you want)