🚀 Bootstrap 5 Snippets - Professional Web Development Extension

A professional-grade VS Code extension providing comprehensive Bootstrap 5.3.2 snippets with built-in accessibility features, keyboard shortcuts, modern UX patterns, and developer-friendly IntelliSense. Perfect for building inclusive, responsive web applications.

🎉 Trusted by 20,000+ developers worldwide!

� Extension Statistics

• 🎯 Total Snippets: 200+ professional components
• ⌨️ Keyboard Shortcuts: 10 essential quick-access shortcuts
• ♿ Accessibility: 100% WCAG 2.1 AA compliant
• � Languages: 7 supported frameworks
• 📱 Responsive: Mobile-first design patterns
• 🎨 Icons: 2000+ FontAwesome icons included
• ⚡ Performance: Optimized for fast development
• � Community: 20,000+ active installationsshikanta12.bootstrap5snippets?label=rating&color=yellow)](https://marketplace.visualstudio.com/items?itemName=Nishikanta12.bootstrap5snippets)

A professional-grade VS Code extension providing comprehensive Bootstrap 5.3.2 snippets with built-in accessibility features, keyboard shortcuts, modern UX patterns, and developer-friendly IntelliSense. Perfect for building inclusive, responsive web applications.

🎉 Trusted by 20,000+ developers worldwide!

🌟 What's New in v2.1 - Enhanced Developer Experience

⌨️ Keyboard Shortcuts (NEW)

• 10 Essential Shortcuts: Quick access to most-used components
• Intuitive Key Combinations: All start with Ctrl+Shift+B (or Cmd+Shift+B on Mac)
• Instant Component Creation: Container, Row, Column, Navbar, Modal, Form, and more
• Interactive Shortcuts Guide: Built-in viewer with complete reference
• Customizable: Modify shortcuts in VS Code preferences

🎯 Enhanced Commands

• Show Shortcuts Guide: Interactive web view with all keyboard shortcuts
• Extension Info: Quick access to version and features
• Welcome Notifications: First-install and update announcements
• GitHub Integration: Direct links to repository and changelog

♿ Comprehensive Accessibility Features

• ARIA Attributes: All interactive components include proper aria-* attributes
• Screen Reader Support: Optimized for assistive technologies with descriptive labels
• Keyboard Navigation: Full keyboard accessibility with proper focus management
• Skip Links: Built-in skip navigation for improved accessibility
• Semantic HTML: All snippets use semantic markup following WCAG 2.1 AA guidelines
• Live Regions: Dynamic content updates announced to screen readers

🎯 Enhanced Developer Experience

• Emoji Descriptions: Visual IntelliSense with emoji-enhanced snippet descriptions
• Multiple Prefixes: Intuitive shortcuts like bs5-btn, btn, modal, form
• Smart Tab Stops: Optimized cursor positioning for faster development
• Professional UX: Modern patterns with loading states, validation, and interactions

🏆 57+ Enhanced Components

• 10 Accessibility Helpers: Focus management, screen reader utilities, semantic structures
• 9 Button Variations: From basic buttons to complex async interactions
• 6 Modal Types: Complete, form dialog, confirmation, gallery, fullscreen
• 18 Form Components: Professional forms with validation and accessibility
• 7 Navigation Patterns: Navbar, breadcrumb, tabs, sidebar with skip links
• 7 Card Layouts: Product, profile, pricing, feature, article cards

---

⌨️ Keyboard Shortcuts

Speed up your Bootstrap development with 10 essential keyboard shortcuts! All shortcuts start with Ctrl+Shift+B (Windows/Linux) or Cmd+Shift+B (Mac):

Shortcut	Component	Description
Ctrl+Shift+B → Ctrl+Shift+C	Container	Bootstrap responsive container
Ctrl+Shift+B → Ctrl+Shift+R	Row	Grid system row
Ctrl+Shift+B → Ctrl+Shift+G	Column	Grid system column
Ctrl+Shift+B → Ctrl+Shift+N	Navbar	Complete navigation bar
Ctrl+Shift+B → Ctrl+Shift+M	Modal	Modal dialog with trigger
Ctrl+Shift+B → Ctrl+Shift+F	Form	Professional form with validation
Ctrl+Shift+B → Ctrl+Shift+A	Alert	Contextual alert message
Ctrl+Shift+B → Ctrl+Shift+K	Card	Content card component
Ctrl+Shift+B → Ctrl+Shift+T	Table	Responsive data table
Ctrl+Shift+B → Ctrl+Shift+D	Dropdown	Dropdown menu

💡 Pro Tip: Use Ctrl+Shift+P → "Show Bootstrap 5 Keyboard Shortcuts" to view the complete interactive guide!

---

✨ Key Features

🎯 Bootstrap 5.3.2 Complete

• Latest Bootstrap version with all components and utilities
• Modern CSS Grid and Flexbox patterns
• Responsive design patterns and breakpoints
• Dark mode and theme customization support

♿ Accessibility Excellence

• WCAG 2.1 AA Compliant snippets
• Screen reader optimized with proper ARIA labels
• Keyboard navigation support for all interactive elements
• Focus management helpers for modals and complex components
• Semantic HTML5 structure with proper landmark roles

🎨 Professional UI Components

• FontAwesome 6.4 integration with 2000+ icons
• Loading states and skeleton screens
• Form validation with real-time feedback
• Interactive animations and transitions
• Mobile-first responsive design patterns

🌐 Multi-Framework Support

• HTML5 - Pure Bootstrap snippets
• JavaScript/TypeScript - Component initialization and interaction
• React - JSX-compatible snippets with proper syntax
• Vue.js - Vue template integration
• Angular - Component and template support
• Svelte - Svelte component patterns
• PHP - Server-side integration snippets

🚀 Developer Experience

• IntelliSense Integration - Rich autocomplete with descriptions
• Consistent Naming - Logical prefix system (bs5-, component names)
• Tab Navigation - Smart cursor positioning for efficient coding
• Code Examples - Real-world usage patterns and best practices

---

🎯 Component Categories

🛡️ Accessibility Helpers (NEW)

Snippet	Description
bs5-accessible-button	� Button with full ARIA support and focus management
bs5-accessible-modal	🪟 Modal with focus trap and screen reader announcements
bs5-accessible-form	📝 Form with comprehensive validation and error handling
bs5-accessible-nav	🧭 Navigation with skip links and keyboard support
bs5-accessible-table	📊 Data table with proper headers and screen reader support
bs5-skip-links	⏩ Skip navigation links for keyboard users
bs5-screen-reader-only	👁️ Content visible only to screen readers
bs5-live-region	📢 Dynamic content announcements
bs5-focus-trap	🎯 JavaScript focus management helper

🔘 Enhanced Buttons (Updated)

Snippet	Description
bs5-btn	🔘 Professional button with accessibility features
bs5-btn-group	👥 Button group with proper ARIA roles
bs5-btn-async	⏳ Button with loading states and async handling
bs5-btn-icon	🎨 Icon button with FontAwesome integration
bs5-btn-dropdown	📋 Split button dropdown with keyboard navigation
bs5-btn-toggle	🔄 Toggle button with state management
bs5-btn-floating	🎈 Floating action button (FAB)
bs5-btn-social	📱 Social media buttons with brand colors

🪟 Modern Modals (Enhanced)

Snippet	Description
bs5-modal	🪟 Complete modal with trigger button and accessibility
bs5-modal-form	📋 Form dialog with validation and ARIA support
bs5-modal-confirm	⚠️ Confirmation dialog with proper warning semantics
bs5-modal-gallery	🖼️ Image gallery modal with navigation controls
bs5-modal-fullscreen	📱 Fullscreen modal with responsive breakpoints
bs5-modal-body	📝 Simple modal body without footer

📝 Professional Forms (Redesigned)

Snippet	Description
bs5-form	� Complete form with validation and accessibility
bs5-input	✏️ Text input with validation states and help text
bs5-email	✉️ Email input with privacy notice and validation
bs5-password	🔒 Password input with show/hide toggle
bs5-select	📋 Select dropdown with proper labeling
bs5-textarea	📄 Textarea with character count and validation
bs5-checkbox	☑️ Checkbox with accessible labeling
bs5-radio	📻 Radio button group with proper fieldset
bs5-file	📁 File upload with format restrictions
bs5-input-group	💰 Input group with prefix/suffix addons

📝 Form Field Groups (Enhanced)

Snippet	Description
bs5-name-row	👥 First and last name fields with autocomplete
bs5-address	🏠 Complete address form with proper validation
bs5-contact	📞 Contact information (email, phone) with formatting
bs5-date-range	📅 Date range picker with constraints
bs5-search	🔍 Search field with icon and clear button
bs5-multi-check	☑️ Multi-select checkbox group
bs5-rating	⭐ Star rating system with accessibility
bs5-switch	🔄 Toggle switch with proper switch role

🧭 Navigation Systems (Rebuilt)

Snippet	Description
bs5-navbar	🧭 Complete navbar with skip links and search
bs5-navbar-simple	🎯 Clean navbar with responsive collapse
bs5-breadcrumb	🍞 Breadcrumb navigation with proper ARIA
bs5-tabs	📂 Tab navigation with keyboard support
bs5-pills	💊 Pills navigation with various layouts
bs5-sidebar	📊 Dashboard sidebar with grouped navigation
bs5-pagination	📄 Accessible pagination with proper labels

🃏 Content Cards (Professional)

Snippet	Description
bs5-card	🃏 Flexible card with optional image and actions
bs5-card-product	🛍️ E-commerce product card with ratings
bs5-card-profile	👤 User profile card with stats and actions
bs5-card-feature	⭐ Feature showcase card with icons
bs5-card-pricing	💰 Pricing plan card with feature list
bs5-card-article	📰 Blog article card with meta information
bs5-card-grid	🎯 Responsive card grid layout

🎪 Interactive Components

Snippet	Description
bs5-carousel	🎠 Image carousel with accessibility controls
bs5-accordion	🪗 Collapsible content with proper ARIA
bs5-dropdown	📋 Dropdown menu with keyboard navigation
bs5-toast	🍞 Toast notifications with auto-dismiss
bs5-offcanvas	📱 Off-canvas sidebar with focus management
bs5-collapse	📁 Collapsible content with smooth animations

📊 Data Display

Snippet	Description
bs5-table	📊 Responsive table with accessibility features
bs5-list-group	📝 Flexible list with various content types
bs5-progress	📈 Progress bars with labels and animations
bs5-spinner	⏳ Loading spinners with accessibility labels
bs5-placeholder	📦 Skeleton loading screens
bs5-alert	🚨 Contextual alerts with icons and actions
bs5-badge	🏷️ Labels and count indicators

🎨 Layout & Utilities

Snippet	Description
bs5-container	📦 Responsive container with breakpoints
bs5-row	📏 Grid row with gutter options
bs5-col	📐 Grid columns with responsive sizing
bs5-flex	🔄 Flexbox utilities for alignment
bs5-spacing	📏 Margin and padding utilities
bs5-text	✍️ Typography and text utilities
bs5-bg	🎨 Background color and gradient utilities
bs5-border	🖼️ Border utilities and decorations

---

🚀 Quick Start

1. Installation

# Via VS Code Command Palette
Ctrl+P (Cmd+P on Mac) → ext install Nishikanta12.bootstrap5snippets

# Or search "Bootstrap 5 Snippets" in Extensions marketplace

2. Create Your First Page

Type bs5-template and press Tab to generate a complete HTML5 page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- Skip to main content link for accessibility -->
    <a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>
    
    <main id="main-content" tabindex="-1">
        <!-- Your content here -->
    </main>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

3. Add Components

• Type bs5-navbar → Complete navigation with accessibility
• Type bs5-card-product → E-commerce product card
• Type bs5-modal-form → Form dialog with validation
• Type bs5-form → Professional form with accessibility

---

💡 Usage Examples

Accessible Navigation

<!-- Type: bs5-navbar -->
<!-- Skip Link for Accessibility -->
<a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>

<!-- Bootstrap 5 Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation" aria-label="Main navigation">
  <div class="container">
    <a class="navbar-brand" href="/" aria-label="Brand name - Go to homepage">Brand</a>
    <!-- Full accessible navbar structure -->
  </div>
</nav>

<main id="main-content" tabindex="-1">
  <!-- Your content here -->
</main>

Professional Form with Validation

<!-- Type: bs5-form -->
<form class="row g-3 needs-validation" novalidate onsubmit="handleFormSubmit(event)" aria-labelledby="formTitle">
  <!-- Form Title -->
  <div class="col-12">
    <h2 id="formTitle" class="h4 mb-3">Contact Form</h2>
  </div>
  
  <!-- Name Fields -->
  <div class="col-md-6">
    <label for="firstName" class="form-label">First Name <span class="text-danger">*</span></label>
    <input type="text" class="form-control" id="firstName" name="firstName" required 
           aria-describedby="firstNameHelp" placeholder="Enter first name">
    <div id="firstNameHelp" class="form-text">Please enter your first name</div>
    <div class="invalid-feedback">Please provide a valid first name.</div>
  </div>
  <!-- More fields... -->
</form>

Product Card with Accessibility

<!-- Type: bs5-card-product -->
<div class="card h-100 shadow-sm position-relative">
  <!-- Product Badge -->
  <span class="badge bg-primary position-absolute top-0 start-0 m-2">New</span>
  
  <!-- Product Image with Loading -->
  <img src="product.jpg" class="card-img-top" alt="Product name" loading="lazy" 
       style="height: 200px; object-fit: cover;">
  
  <!-- Card Body with Proper Structure -->
  <div class="card-body d-flex flex-column">
    <small class="text-muted text-uppercase mb-1">Category</small>
    <h5 class="card-title mb-2">Product Name</h5>
    <!-- Full product card structure -->
  </div>
</div>

---

🎯 Framework Integration

React/Next.js

// Snippets work perfectly with JSX
export default function ProductCard() {
  return (
    // Type: bs5-card-product (auto-converts to JSX)
    <div className="card h-100 shadow-sm">
      {/* Component structure */}
    </div>
  );
}

Vue.js

<template>
  <!-- Type: bs5-navbar (Vue template compatible) -->
  <nav class="navbar navbar-expand-lg" role="navigation">
    <!-- Navigation structure -->
  </nav>
</template>

Angular

<!-- Component template -->
<!-- Type: bs5-form (Angular compatible) -->
<form class="row g-3 needs-validation" novalidate (ngSubmit)="onSubmit($event)">
  <!-- Form structure -->
</form>

---

�️ Configuration

VS Code Settings

{
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "html.suggest.html5": true
}

Custom Prefix Configuration

The extension supports multiple prefixes for the same snippet:

• bs5-btn, btn → Button component
• bs5-modal, modal → Modal component
• bs5-form, form → Form component
• bs5-card, card → Card component

---

📈 SEO & Performance Features

SEO Optimization

• Semantic HTML5 structure with proper landmarks
• Schema.org microdata support in snippets
• Meta tags and Open Graph integration
• Structured data helpers for rich snippets
• Image optimization with lazy loading and proper alt text

Performance Features

• Lazy loading images with loading="lazy"
• Preload critical resources in templates
• Optimized CSS with minimal custom styles
• Tree-shakable components (use only what you need)
• Modern JavaScript with ES6+ patterns

Web Standards Compliance

• W3C Valid HTML output
• WCAG 2.1 AA accessibility compliance
• Progressive Enhancement approach
• Mobile-First responsive design
• Cross-Browser compatibility

---

🤝 Contributing

We welcome contributions! Here's how you can help:

Types of Contributions

• 🐛 Bug Reports - Found an issue? Let us know!
• 💡 Feature Requests - Ideas for new components or improvements
• 🔧 Code Contributions - Submit pull requests with enhancements
• 📖 Documentation - Help improve our guides and examples
• ♿ Accessibility - Suggest accessibility improvements

Development Setup

git clone https://github.com/NishikantaRay/Vs-code-extension-for-Bootstrap5.git
cd Vs-code-extension-for-Bootstrap5
npm install
npm run validate  # Validate all snippets
npm run test      # Run tests

Contribution Guidelines

1. Follow accessibility standards (WCAG 2.1 AA)
2. Test across multiple browsers and screen readers
3. Include comprehensive examples and documentation
4. Use semantic HTML and proper ARIA attributes
5. Maintain consistent naming conventions

---

📊 Extension Statistics

• 🎯 Total Snippets: 200+ professional components
• ♿ Accessibility: 100% WCAG 2.1 AA compliant
• 🌐 Languages: 7 supported frameworks
• � Responsive: Mobile-first design patterns
• 🎨 Icons: 2000+ FontAwesome icons included
• ⚡ Performance: Optimized for fast development

---

🏆 Awards & Recognition

• ⭐ Top-Rated Bootstrap extension on VS Code Marketplace
• 🏅 Accessibility Excellence - WCAG 2.1 AA compliant
• 🚀 Developer Favorite - 20,000+ active installations
• ⌨️ Enhanced Productivity - 10 keyboard shortcuts for rapid development
• 📈 Growing Community - Active GitHub contributions
• 🎯 Professional Grade - Used by enterprises worldwide

---

📚 Resources & Learning

Official Documentation

• 📖 Bootstrap 5.3 Documentation
• ♿ Web Accessibility Guidelines
• 🎨 FontAwesome Icons
• 🛠️ VS Code Extension API

Tutorials & Guides

• 🎓 Bootstrap 5 Crash Course
• ♿ Accessibility Best Practices
• 🎨 Design System Guidelines
• 📱 Responsive Design Patterns

Community

• 💬 GitHub Discussions
• 🐦 Follow on Twitter
• 📧 Newsletter
• � YouTube Tutorials

---

📞 Support & Feedback

Get Help

• 🐞 Bug Reports: GitHub Issues
• 💬 Community Discussion: GitHub Discussions
• 📚 Documentation: Wiki
• ⭐ Rate & Review: VS Code Marketplace

Feature Requests

Have an idea for a new component or feature? We'd love to hear it!

1. Check existing requests
2. Create a new feature request
3. Join the discussion

---

📄 License & Credits

License

This extension is licensed under the MIT License. You are free to use, modify, and distribute this software.

Credits

• Bootstrap Team - For the amazing Bootstrap framework
• FontAwesome - For the comprehensive icon library
• VS Code Team - For the excellent extension platform
• Contributors - All the developers who helped improve this extension
• Community - For feedback, bug reports, and feature suggestions

Third-Party Libraries

• Bootstrap 5.3.2 - MIT License
• FontAwesome 6.4 - Multiple licenses
• Popper.js - MIT License

---

� Changelog

v2.0.0 (Latest) - Accessibility-First Release

• ♿ NEW: Complete accessibility overhaul with WCAG 2.1 AA compliance
• 🆕 NEW: 10 specialized accessibility helper snippets
• 🔄 ENHANCED: All components now include proper ARIA attributes
• 🎯 IMPROVED: Developer experience with emoji descriptions and multiple prefixes
• 📱 ADDED: Modern UX patterns with loading states and validation
• �🚀 PERFORMANCE: Optimized snippet organization and loading

v1.11.0 - Foundation Release

• 🎯 Bootstrap 5.3.2 support
• 📱 Mobile-first responsive components
• 🎨 FontAwesome 6.4 integration
• 🌐 Multi-framework support
• 📋 150+ component snippets

View full changelog

---

🎉 Ready to Build Amazing Web Applications?

Install Now and Start Creating Accessible, Professional Bootstrap 5 Components!

⭐ Star us on GitHub | 📢 Share with your team | 💬 Join our community

---

Made with ❤️ for developers who care about accessibility and professional web development

Happy Coding! 🚀

Core Components

• Accordions - Collapsible content panels
• Alerts - Contextual feedback messages
• Badges - Small count and labeling components
• Breadcrumbs - Navigation hierarchy indicators
• Buttons - Various button styles and groups
• Cards - Flexible content containers
• Carousels - Image and content sliders
• Dropdowns - Contextual menus
• Forms - Input fields, validation, and controls
• List Groups - Flexible lists of content
• Modals - Dialog boxes and popups
• Navbars - Responsive navigation headers
• Pagination - Page navigation controls
• Progress Bars - Task completion indicators
• Spinners - Loading state indicators
• Tables - Data tables with styling
• Tabs - Tabbed content interfaces
• Tooltips - Hover information popups

Bootstrap 5.3 New Features

• Offcanvas - Hidden sidebars and slide-out panels
• Toast - Non-blocking notification messages
• Placeholders - Loading skeleton screens
• Popovers - Rich content tooltips
• Advanced Utilities - Modern CSS features

Utility Classes

• Display - Show/hide elements responsively
• Flexbox - Complete flex utilities
• Spacing - Margin and padding classes
• Typography - Text styling and alignment
• Colors - Background and text colors
• Borders - Border styles and utilities
• Positioning - Element positioning
• Shadows - Box shadow effects
• Sizing - Width and height utilities

📋 Demo

🔧 Usage

Quick Start Template

Trigger	Description
!bs5	Complete HTML5 template with Bootstrap 5.3.2 and FontAwesome 6

Component Snippets

Trigger	Description
!bs5-btn	Button with customizable styles
!bs5-card	Basic card component
!bs5-modal	Modal dialog
!bs5-navbar-default	Default navigation bar
!bs5-form-example	Complete form with validation
!bs5-carousel	Image carousel
!bs5-accordion	Collapsible content
!bs5-offcanvas	Off-canvas sidebar
!bs5-toast	Toast notification

Utility Snippets

Trigger	Description
!bs5-d	Display utilities
!bs5-flex	Flexbox utilities
!bs5-spacing	Margin/padding utilities
!bs5-text	Text utilities
!bs5-bg	Background utilities
!bs5-border	Border utilities

JavaScript Helpers

Trigger	Description
bs5-modal-init	Initialize modal with JavaScript
bs5-tooltip-init	Initialize tooltips
bs5-carousel-init	Initialize carousel
bs5-form-validation	Form validation script

Form Snippets

Trigger	Description
!form-email	Email input field
!form-password	Password input field
!form-select	Select dropdown
!form-checkbox	Checkbox input
!form-radio	Radio button
!form-textarea	Textarea field
!bs5-floating-label	Floating label input

🆕 New Bootstrap 5.3 Components

Offcanvas Components

Trigger	Description
bs5-offcanvas	Basic off-canvas from left
bs5-offcanvas-end	Off-canvas from right
bs5-offcanvas-top	Off-canvas from top
bs5-offcanvas-bottom	Off-canvas from bottom
bs5-offcanvas-backdrop	Off-canvas with backdrop options
bs5-offcanvas-nav	Off-canvas with navigation menu

Toast Notifications

Trigger	Description
bs5-toast	Basic toast notification
bs5-toast-success	Success toast with icon
bs5-toast-error	Error toast with icon
bs5-toast-warning	Warning toast with icon
bs5-toast-info	Info toast with icon
bs5-toast-container	Toast container with positioning
bs5-toast-stack	Stacked toast notifications
bs5-toast-js	Toast with JavaScript trigger

Placeholder Components

Trigger	Description
bs5-placeholder	Basic text placeholder
bs5-placeholder-btn	Placeholder button
bs5-placeholder-card	Complete placeholder card
bs5-placeholder-p	Paragraph placeholder
bs5-placeholder-sizes	Placeholder with different sizes
bs5-placeholder-colors	Colored placeholders
bs5-placeholder-list	List group placeholders
bs5-placeholder-table	Table with placeholders

Spinner Components

Trigger	Description
bs5-spinner	Basic border spinner
bs5-spinner-color	Colored border spinner
bs5-spinner-grow	Growing spinner
bs5-spinner-grow-color	Colored growing spinner
bs5-spinner-size	Spinners with sizes
bs5-spinner-btn	Spinner in button
bs5-spinner-center	Centered spinner
bs5-spinner-multi	Multiple spinners

Progress Components

Trigger	Description
bs5-progress	Basic progress bar
bs5-progress-label	Progress with percentage label
bs5-progress-height	Custom height progress
bs5-progress-colors	Colored progress bars
bs5-progress-multiple	Stacked progress bars
bs5-progress-striped	Striped progress bars
bs5-progress-animated	Animated progress bars
bs5-progress-steps	Progress with step indicators
bs5-progress-circle	Circular progress (SVG)
bs5-progress-js	Interactive progress with JavaScript

Alert Components

Trigger	Description
bs5-alert	Basic contextual alert
bs5-alert-heading	Alert with heading and content
bs5-alert-link	Alert with styled link
bs5-alert-dismissible	Dismissible alert
bs5-alert-icon	Alert with FontAwesome icon
bs5-alert-button	Alert with action button
bs5-alert-list	Alert with list content
bs5-alert-toast	Toast-style positioned alert
bs5-alert-progress	Alert with progress bar
bs5-alert-auto	Auto-dismissing alert

Badge Components

Trigger	Description
bs5-badge	Basic colored badge
bs5-badge-pill	Pill-shaped badge
bs5-badge-heading	Badge in heading
bs5-badge-btn	Badge positioned on button
bs5-badge-notification	Notification dot badge
bs5-badge-link	Clickable badge link
bs5-badge-icon	Badge with FontAwesome icon
bs5-badge-counter	Badge as counter
bs5-badge-group	Group of badges

List Group Components

Trigger	Description
bs5-list-group	Basic list group
bs5-list-group-active	List with active/disabled items
bs5-list-group-links	Clickable link list
bs5-list-group-buttons	Button-based list
bs5-list-group-flush	Flush list (no borders)
bs5-list-group-numbered	Numbered list with badges
bs5-list-group-horizontal	Horizontal list group
bs5-list-group-contextual	List with contextual colors
bs5-list-group-badges	List items with badges
bs5-list-group-custom	List with custom content

Dropdown Components

Trigger	Description
bs5-dropdown	Basic dropdown menu
bs5-dropdown-link	Dropdown with link trigger
bs5-dropdown-split	Split button dropdown
bs5-dropdown-directions	Dropdown directions (up/end/start)
bs5-dropdown-items	Dropdown with various item types
bs5-dropdown-autoclose	Dropdown with auto-close options
bs5-dropdown-form	Dropdown containing form
bs5-dropdown-dark	Dark theme dropdown
bs5-dropdown-align	Dropdown with alignment options

Tab Components

Trigger	Description
bs5-tabs	Basic tab navigation
bs5-tabs-pills	Pills-style tabs
bs5-tabs-vertical	Vertical tab navigation
bs5-tabs-justified	Justified full-width tabs
bs5-tabs-icons	Tabs with FontAwesome icons
bs5-tabs-dropdown	Tabs with dropdown menu

Tooltip Components

Trigger	Description
bs5-tooltip	Basic tooltip with placement
bs5-tooltip-directions	Tooltips for all directions
bs5-tooltip-html	Tooltip with HTML content
bs5-tooltip-link	Tooltip on link element
bs5-tooltip-trigger	Custom trigger tooltip
bs5-tooltip-disabled	Tooltip on disabled element
bs5-tooltip-js	Tooltip with JavaScript init
bs5-tooltip-options	Tooltip with custom options
bs5-tooltip-icon	Tooltip on help icon
bs5-tooltip-multiple	Multiple tooltips with script

Popover Components

Trigger	Description
bs5-popover	Basic popover with content
bs5-popover-directions	Popovers for all directions
bs5-popover-dismissible	Dismissible popover
bs5-popover-html	Popover with HTML content
bs5-popover-hover	Hover-triggered popover
bs5-popover-js	Popover with JavaScript init
bs5-popover-options	Popover with custom options
bs5-popover-modal	Popover inside modal
bs5-popover-card	Card-style popover
bs5-popover-multiple	Multiple popovers with script

FontAwesome Icons

Prefix	Description
fa-	FontAwesome 6 regular icons
fas-	FontAwesome 6 solid icons
fab-	FontAwesome 6 brand icons

Examples:

• fa-check → <i class="fa-solid fa-check"></i>
• fab-github → <i class="fa-brands fa-github"></i>

🛠️ Installation

1. Open VS Code
2. Press Ctrl+P (or Cmd+P on Mac)
3. Type ext install Nishikanta12.bootstrap5snippets
4. Press Enter

Or search for "Bootstrap 5 Snippets" in the Extensions marketplace.

📝 Configuration

The extension works out of the box with no configuration required. All snippets use consistent !bs5- prefixes for easy discovery through IntelliSense.

🤝 Contributing

Contributions are welcome! Please see our GitHub repository for:

• 🐛 Bug reports
• 💡 Feature requests
• 🔧 Pull requests
• 📖 Documentation improvements

📄 License

This extension is licensed under the MIT License.

🔄 Changelog

See CHANGELOG.md for detailed release notes and version history.

📞 Support

• 🐞 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• ⭐ Rate & Review: VS Code Marketplace

---

Enjoy coding with Bootstrap 5! 🎉