SHORTCUTS.md

🚀 Bootstrap 5 Snippets - Keyboard Shortcuts

⌨️ Quick Access Shortcuts

All shortcuts start with Ctrl+Shift+B (Windows/Linux) or Cmd+Shift+B (Mac), followed by a second key combination:

🏗️ Layout & Grid

• Container: Ctrl+Shift+B → Ctrl+Shift+C
• Row: Ctrl+Shift+B → Ctrl+Shift+R
• Column: Ctrl+Shift+B → Ctrl+Shift+G

🧭 Navigation

• Navbar: Ctrl+Shift+B → Ctrl+Shift+N

📋 Components

• Modal: Ctrl+Shift+B → Ctrl+Shift+M
• Form: Ctrl+Shift+B → Ctrl+Shift+F
• Alert: Ctrl+Shift+B → Ctrl+Shift+A
• Card: Ctrl+Shift+B → Ctrl+Shift+K
• Table: Ctrl+Shift+B → Ctrl+Shift+T
• Dropdown: Ctrl+Shift+B → Ctrl+Shift+D

📝 Text-Based Snippets

For comprehensive snippet collection, simply type the prefix and press Tab:

🎯 Accessibility Snippets

• bs5-btn-accessible - Fully accessible button with ARIA
• bs5-modal-accessible - Modal with focus management
• bs5-form-accessible - Screen reader optimized form
• bs5-nav-accessible - Navigation with skip links
• bs5-table-accessible - Accessible data table
• bs5-alert-accessible - Alert with live regions
• bs5-carousel-accessible - Carousel with keyboard navigation
• bs5-accordion-accessible - Accordion with proper ARIA
• bs5-focus-helpers - JavaScript focus management functions
• bs5-sr-content - Screen reader optimized content structure

🔘 Buttons

• bs5-btn / btn / button - Primary button
• bs5-btn-outline - Outline button
• bs5-btn-group - Button group
• bs5-btn-toolbar - Button toolbar
• bs5-btn-loading - Loading button with spinner
• bs5-btn-dropdown - Button dropdown
• bs5-btn-link - Link button
• bs5-btn-icon - Button with icon
• bs5-btn-close - Close button

📋 Forms

• bs5-form / form - Basic form
• bs5-form-horizontal - Horizontal form layout
• bs5-form-inline - Inline form
• bs5-form-floating - Floating labels
• bs5-form-validation - Form with validation
• bs5-input / input - Form input
• bs5-textarea - Text area
• bs5-select - Select dropdown
• bs5-checkbox - Checkbox input
• bs5-radio - Radio input
• bs5-switch - Switch toggle
• bs5-range - Range slider
• bs5-file - File input
• bs5-input-group - Input group
• bs5-form-fieldset - Form fieldset
• bs5-form-grid - Form grid layout
• bs5-form-row - Form row
• bs5-form-check-inline - Inline checkboxes
• bs5-form-radio-inline - Inline radio buttons

🃏 Cards

• bs5-card / card - Basic card
• bs5-card-img - Card with image
• bs5-card-header - Card with header
• bs5-card-footer - Card with footer
• bs5-card-group - Card group
• bs5-card-deck - Card deck
• bs5-card-columns - Card columns

🧭 Navigation

• bs5-navbar / navbar - Complete navbar
• bs5-nav - Basic navigation
• bs5-nav-tabs - Tab navigation
• bs5-nav-pills - Pills navigation
• bs5-breadcrumb - Breadcrumb navigation
• bs5-pagination - Pagination
• bs5-nav-vertical - Vertical navigation

📦 Layout

• bs5-container / container - Container
• bs5-container-fluid - Fluid container
• bs5-row / row - Grid row
• bs5-col / col - Grid column
• bs5-grid - Complete grid system
• bs5-flex - Flexbox utilities

🎨 Components

• bs5-alert / alert - Alert message
• bs5-badge - Badge
• bs5-spinner - Loading spinner
• bs5-progress - Progress bar
• bs5-toast - Toast notification
• bs5-tooltip - Tooltip
• bs5-popover - Popover
• bs5-collapse - Collapsible content
• bs5-accordion - Accordion
• bs5-carousel - Image carousel
• bs5-modal / modal - Modal dialog
• bs5-offcanvas - Offcanvas sidebar
• bs5-dropdown - Dropdown menu
• bs5-list-group - List group
• bs5-table / table - Data table

🎯 Utilities

• bs5-display - Display utilities
• bs5-text - Text utilities
• bs5-color - Color utilities
• bs5-spacing - Spacing utilities
• bs5-border - Border utilities
• bs5-position - Position utilities
• bs5-flex-utils - Flex utilities
• bs5-shadow - Shadow utilities

🌐 Framework Specific

• vue-* - Vue.js components
• ng-* - Angular components
• svelte-* - Svelte components
• php-* - PHP templates

📱 Templates

• bs5-starter / !bs5 - Bootstrap 5 starter template
• bs5-landing - Landing page template
• bs5-dashboard - Dashboard template
• bs5-blog - Blog template

💡 Pro Tips

1. Multiple Prefixes: Most snippets support multiple prefixes for flexibility
2. Tab Navigation: Use Tab to jump between snippet placeholders
3. Accessibility First: All snippets include proper ARIA attributes
4. IntelliSense: Emoji icons help identify snippet categories
5. Live Templates: Snippets expand with proper Bootstrap 5.3 syntax

🔧 Customization

You can modify shortcuts in VS Code:

1. Open Command Palette (Ctrl+Shift+P)
2. Type "Preferences: Open Keyboard Shortcuts"
3. Search for "Bootstrap 5" to find all shortcuts
4. Click pencil icon to customize

📚 More Information

• GitHub: https://github.com/NishikantaRay/Vs-code-extension-for-Bootstrap5
• Issues: Report bugs and request features
• Documentation: Complete Bootstrap 5.3 reference

---

Happy Coding with Bootstrap 5! 🎉