🚀 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

Follow accessibility standards (WCAG 2.1 AA)
Test across multiple browsers and screen readers
Include comprehensive examples and documentation
Use semantic HTML and proper ARIA attributes
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

Tutorials & Guides

Community

📞 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!

📄 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

Open VS Code
Press Ctrl+P (or Cmd+P on Mac)
Type ext install Nishikanta12.bootstrap5snippets
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! 🎉

Name		Name	Last commit message	Last commit date
Latest commit History 25 Commits
.vscode		.vscode
node_modules		node_modules
snippets		snippets
test		test
.vscodeignore		.vscodeignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
MULTI_LANGUAGE_SUPPORT.md		MULTI_LANGUAGE_SUPPORT.md
PUBLISHING_GUIDE.md		PUBLISHING_GUIDE.md
README.md		README.md
SHORTCUTS.md		SHORTCUTS.md
bootstrap5snippets-1.5.0.vsix		bootstrap5snippets-1.5.0.vsix
bootstrap5snippets-2.0.0.vsix		bootstrap5snippets-2.0.0.vsix
bootstrap5snippets-2.1.0.vsix		bootstrap5snippets-2.1.0.vsix
bootstrap5snippets-2.1.1.vsix		bootstrap5snippets-2.1.1.vsix
demo.gif		demo.gif
extension.js		extension.js
icon.png		icon.png
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
publish.sh		publish.sh
test-javascript.js		test-javascript.js
test-snippets.html		test-snippets.html
vsc-extension-quickstart.md		vsc-extension-quickstart.md

License

NishikantaRay/Vs-code-extension-for-Bootstrap5

Folders and files

Latest commit

History

Repository files navigation

🚀 Bootstrap 5 Snippets - Professional Web Development Extension

� Extension Statistics

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

⌨️ Keyboard Shortcuts (NEW)

🎯 Enhanced Commands

♿ Comprehensive Accessibility Features

🎯 Enhanced Developer Experience

🏆 57+ Enhanced Components

⌨️ Keyboard Shortcuts

✨ Key Features

🎯 Bootstrap 5.3.2 Complete

♿ Accessibility Excellence

🎨 Professional UI Components

🌐 Multi-Framework Support

🚀 Developer Experience

🎯 Component Categories

🛡️ Accessibility Helpers (NEW)

🔘 Enhanced Buttons (Updated)

🪟 Modern Modals (Enhanced)

📝 Professional Forms (Redesigned)

📝 Form Field Groups (Enhanced)

🧭 Navigation Systems (Rebuilt)

🃏 Content Cards (Professional)

🎪 Interactive Components

📊 Data Display

🎨 Layout & Utilities

🚀 Quick Start

1. Installation

2. Create Your First Page

3. Add Components

💡 Usage Examples

Accessible Navigation

Professional Form with Validation

Product Card with Accessibility

🎯 Framework Integration

React/Next.js

Vue.js

Angular

�️ Configuration

VS Code Settings

Custom Prefix Configuration

📈 SEO & Performance Features

SEO Optimization

Performance Features

Web Standards Compliance

🤝 Contributing

Types of Contributions

Development Setup

Contribution Guidelines

📊 Extension Statistics

🏆 Awards & Recognition

📚 Resources & Learning

Official Documentation

Tutorials & Guides

Community

📞 Support & Feedback

Get Help

Feature Requests

📄 License & Credits

License

Credits

Third-Party Libraries

� Changelog

v2.0.0 (Latest) - Accessibility-First Release

v1.11.0 - Foundation Release

🎉 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

Core Components

Bootstrap 5.3 New Features

Utility Classes

📋 Demo

🔧 Usage

Quick Start Template

Packages