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 and insiders build.

Plugin in action

Idea

Inspired from Bootstrap 4, Font Awesome 4, and Font Awesome 5 (Free & Pro) snippet plugins. The goal was to focus purely on Bootstrap 5 snippets in a clean and dedicated extension.

Help

The detailed list of supported template triggers is provided below.

You can also watch a quick tutorial on YouTube.

Feel free to suggest improvements or request new features via issues.

Suggestions, feedback, and comments are welcome via Twitter: @anbuselvanrocky

Installation (2 easy steps)

Install plugin
Press F1, paste ext install bootstrap5-vscode, then press Enter

Go to Extensions with Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac), search for Bootstrap 5 Quick Snippets, and install

Reload your editor and start using

Usage

Open an HTML file, type b5-, then press Ctrl+Space to see available snippets.

Naming convention
If a trigger starts with @, it targets an HTML attribute

Example
@ means HTML attribute

Changelog

All changes are tracked in the changelog.

Contribution

Contributions are welcome to improve the snippets.

Documentation - Bootstrap 5 snippets

Trigger	Description
bs5-$	Bootstrap master template
bs5-accordion-default	Accordion default
bs5-alert-default	Alert default
bs5-alert-dismissible	Alert dismissible
bs5-badge-default	Badge default
bs5-button-default	Button default
bs5-card-default	Card default
bs5-carousel-default	Carousel default
bs5-dropdown-default	Dropdown default
bs5-form-input	Form input
bs5-form-select-custom	Form select custom
bs5-form-textarea	Form textarea
bs5-modal-default	Modal default
bs5-navbar-default	Navbar default
bs5-pagination-default	Pagination default
bs5-progress-default	Progress default
bs5-table-default	Table default
bs5-tooltip-default	Tooltip default
bs5-grid-row	Grid row
bs5-grid-col	Grid column

(Full list includes 179 snippets covering all Bootstrap components such as forms, grids, navbars, modals, utilities, and more.)

Commands

Experimental command available
Type cyberdude in command palette to open CyberDude YouTube channel inside VSCode

Supported languages

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

Authors

Anbuselvan Rocky

Special thanks to Ashok Koyi

Contributors

Adam Kortus
Ugur y

License

MIT License
Do whatever you want

Bootstrap 5 QuicK

dev