Bootstrap 5 Lazy Snippets

Tired of switching tabs to look up Bootstrap 5 components?

Bootstrap 5 Lazy Snippets is your ultimate VS Code companion for rapid Bootstrap 5 development. This extension provides a comprehensive collection of essential Bootstrap 5 HTML snippets, allowing you to instantly generate common components with just a few keystrokes. Say goodbye to repetitive typing and constant documentation checks – boost your coding speed and focus on building amazing UIs!

✨ Features

This extension provides a wide array of Bootstrap 5 components and structures as easy-to-use snippets. Simply type the prefix (e.g., bs-card, bs-modal, bs-btn-primary) and press Tab or Enter to insert the complete HTML structure.

Key features include:

• HTML Boilerplate !bs5 Quickly generate a basic HTML5 structure with Bootstrap 5 CSS and JS CDN links already included.

• Accordion Components bs5-accordion, bs5-accordion-flush, bs5-accordion-open: Insert various accordion types with pre-configured items.

• Alerts bs5-alert-primary, bs5-alert-success: Get all alert variations instantly.

• Badges bs5-badge-primary, bs5-badge-pill-success etc. Easily add regular and pill-shaped badges in all colors.

• Breadcrumbs bs5-breadcrumb Generate standard breadcrumb navigation.

• Buttons bs5-button-primary, bs5-button-outline-danger etc. Quickly insert solid, outline, and link buttons, including button groups and split dropdown buttons.

• Cards bs5-card-img Full card structures with images.

• Carousels bs5-carousel, bs5-carousel-indicators, bs5-carousel-captions, bs5-carousel-fade Insert various carousel types with default slides.

• Collapse bs5-collapse Basic collapse component with linked trigger.

• Dropdowns bs5-dropdown, bs5-dropdown-divider-danger, bs5-dropdown-split-danger Standard and split dropdowns with menu items and dividers.

• List Groups bs5-list-group A basic unordered list group.

• Modals bs5-modal Complete modal structures with trigger buttons and pre-configured content areas.

• Navbar bs5-navbar-search A responsive navbar with brand, navigation links, dropdown, and a search form.

• Offcanvas bs5-offcanvas A slide-out offcanvas component with triggers and sample content.

• Pagination bs5-pagination A basic pagination component.

• Popovers bs5-popover-top, bs5-popover-right etc. Buttons with popover functionality for various placements.

• Progress Bars bs5-progress-bar etc. Progress bars at various percentage values.

• Scrollspy bs5-scrollspy-navbar A full scrollspy example with a navigation bar and corresponding content sections.

• Spinners bs5-spinner A basic border spinner.

• Toasts bs5-toast-live A live toast notification with a trigger button and essential JavaScript.

• Tooltips bs5-tooltip-top Buttons with tooltip functionality and a custom-themed example.

⚙️ Requirements

This extension does not have any external runtime requirements or dependencies beyond Visual Studio Code itself. All snippets are pure HTML with Bootstrap 5 classes, relying on Bootstrap's CSS and JavaScript (which you typically include via CDN in your project).

🔧 Extension Settings

This extension does not contribute any VS Code settings through the contributes.configuration extension point. It focuses solely on providing code snippets.

🐛 Known Issues

No known major issues at this time.

(If you discover any issues during testing or after release, list them here. E.g., "Tooltips and Popovers require manual JavaScript initialization in your project, as per Bootstrap's documentation.")

📝 Release Notes

1.0.0 Initial release of Bootstrap 5 Lazy Snippets.

Includes boilerplate HTML (!bs5) with Bootstrap 5 CDN.

Comprehensive collection of snippets for Accordions, Alerts, Badges, Breadcrumbs, Buttons, Cards, Carousels, Collapse, Dropdowns, List Groups, Modals, Navbars, Offcanvas, Pagination, Popovers, Progress Bars, Scrollspy, Spinners, Toasts, and Tooltips.

Optimized for quick insertion with intuitive prefixes and helpful tabstops.

✨ Following Extension Guidelines

This extension aims to adhere to Visual Studio Code's Extension Guidelines to ensure a high-quality user experience.

📚 For more information

Visual Studio Code's Markdown Support

Markdown Syntax Reference

Bootstrap 5 Official Documentation (for full component details and usage)

Enjoy faster Bootstrap 5 development! 🚀