🚀 Bootstrap v5 Snippets & Tools

Complete Bootstrap v5 extension for Visual Studio Code with intelligent snippets, autocomplete, syntax highlighting, and powerful development tools.

✨ Features

🎯 Smart Code Snippets

• Dynamic Parameters: Snippets with intelligent placeholders (e.g., row → row with col-${1:md}-${2:6})
• 400+ Bootstrap Components: Grid, Buttons, Forms, Cards, Navigation, Modals, Accordion, Carousel, Dropdowns, Offcanvas, Toasts, and more
• Multi-Language Support: HTML, JavaScript, JSX, TypeScript, PHP, Vue
• Context-Aware: Different snippets for different file types

🔍 Intelligent Autocomplete

• Bootstrap Classes: Auto-suggest all Bootstrap v5 classes with descriptions
• Data Attributes: Smart completion for data-bs-* attributes
• Responsive Breakpoints: Auto-complete for sm, md, lg, xl, xxl
• Color System: Complete color palette suggestions

💡 Hover Documentation

• Class Descriptions: Hover over any Bootstrap class to see its documentation
• Usage Examples: Quick reference for class usage
• Responsive Info: Breakpoint and sizing information

🎨 Syntax Highlighting

• Bootstrap Classes: Special highlighting for all Bootstrap classes
• Data Attributes: Highlight data-bs-* attributes
• Component Recognition: Identify Bootstrap components in your code

⚡ Quick Commands

• Insert Grid: Ctrl+Shift+P → "Insert Bootstrap Grid"
• Insert Button: Ctrl+Shift+P → "Insert Bootstrap Button"
• Insert Card: Ctrl+Shift+P → "Insert Bootstrap Card"
• Insert Navbar: Ctrl+Shift+P → "Insert Bootstrap Navbar"
• Insert Modal: Ctrl+Shift+P → "Insert Bootstrap Modal"

🛠️ Context Menu Integration

Right-click in HTML/JS/JSX files to access Bootstrap commands directly from the context menu.

🚀 Quick Start

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Bootstrap v5 Snippets & Tools"
4. Click Install
5. Reload VS Code

Basic Usage

Using Snippets

1. Type a Bootstrap component name (e.g., btn, row, card)
2. Press Tab to expand the snippet
3. Use dynamic placeholders to customize (e.g., change primary to secondary)

Example Snippets

<!-- Type "row" + Tab -->
<div class="row">
    <div class="col-md-6">Content 1</div>
    <div class="col-md-6">Content 2</div>
</div>

<!-- Type "btn" + Tab -->
<button type="button" class="btn btn-primary">Button Text</button>

<!-- Type "card" + Tab -->
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Card content</p>
        <button class="btn btn-primary">Go somewhere</button>
    </div>
</div>

Autocomplete

• Start typing class=" and get Bootstrap class suggestions
• Type data-bs- for data attribute completion
• Hover over classes for documentation

📋 Supported Components

Layout & Grid

• ✅ Container (container, container-fluid)
• ✅ Grid System (row, col-*, responsive breakpoints)
• ✅ Flexbox Utilities (d-flex, justify-content-*, align-items-*)
• ✅ Display Utilities (d-none, d-block, d-flex)
• ✅ Spacing (m-, p-, mt-, mb-, ms-, me-)

Content & Typography

• ✅ Typography (display-*, h1-h6, lead, text-*)
• ✅ Colors (bg-*, text-*)
• ✅ Text Alignment (text-center, text-start, text-end)
• ✅ Font Weights (fw-*)
• ✅ Line Heights (lh-*)

Components

• ✅ Buttons (btn, btn-outline-*, btn-sm, btn-lg)
• ✅ Cards (card, card-body, card-title, card-text)
• ✅ Forms (form-control, form-select, form-check)
• ✅ Navigation (navbar, nav, nav-link)
• ✅ Modals (modal, modal-dialog, modal-content)
• ✅ Alerts (alert, alert-*)
• ✅ Badges (badge, bg-*)
• ✅ Progress (progress, progress-bar)
• ✅ List Groups (list-group, list-group-item)
• ✅ Breadcrumbs (breadcrumb, breadcrumb-item)
• ✅ Pagination (pagination, page-link, page-item)
• ✅ Tooltips & Popovers (data attributes)
• ✅ Spinners (spinner-border, spinner-grow)
• ✅ Toasts (toast, toast-*)
• ✅ Dropdowns (dropdown, dropdown-*)
• ✅ Accordion (accordion, accordion-*)
• ✅ Carousel (carousel, carousel-*)
• ✅ Offcanvas (offcanvas, offcanvas-*)
• ✅ Placeholders (placeholder, placeholder-*)

Utilities

• ✅ Borders (border, border-*, rounded)
• ✅ Shadows (shadow, shadow-sm, shadow-lg)
• ✅ Opacity (opacity-*)
• ✅ Overflow (overflow-*)
• ✅ Position (position-*, fixed-top, sticky-top)
• ✅ Z-index (z-index-*)
• ✅ Object Fit (object-fit-*)
• ✅ Clearfix (clearfix)
• ✅ Color & Background (bg-*, text-*)
• ✅ Sizing (w-*, h-*, mw-*, mh-*)
• ✅ Vertical Align (align-*)
• ✅ Visibility (visible, invisible)

⚙️ Extension Settings

Configure the extension through VS Code Settings:

{
    "bootstrap-v5-extension.defaultBreakpoint": "md",
    "bootstrap-v5-extension.defaultButtonStyle": "primary",
    "bootstrap-v5-extension.autoIndent": true,
    "bootstrap-v5-extension.enableAutocomplete": true,
    "bootstrap-v5-extension.enableHover": true
}

Available Settings

🎮 Keyboard Shortcuts

🔧 Development

Building from Source

# Clone the repository
git clone <repository-url>
cd bootstrap-v5-extension

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch for changes
npm run watch

# Package extension
npm run package

Project Structure

bootstrap-v5-extension/
├── snippets/           # Code snippets for different languages
│   ├── html.json      # HTML snippets
│   ├── javascript.json # JavaScript snippets
│   └── jsx.json       # JSX/React snippets
├── syntaxes/          # Syntax highlighting
│   └── bootstrap.tmLanguage.json
├── src/               # TypeScript source code
│   └── extension.ts   # Main extension logic
├── resources/         # Icons and other resources
├── package.json       # Extension manifest
└── README.md          # This file

🐛 Troubleshooting

Common Issues

Snippets not expanding:

• Ensure you're in an HTML/JS/JSX file
• Check that the file language is set correctly
• Try restarting VS Code

Autocomplete not working:

• Check that bootstrap-v5-extension.enableAutocomplete is true
• Ensure you're typing in a class attribute or data-bs- attribute

Hover documentation not showing:

• Check that bootstrap-v5-extension.enableHover is true
• Hover over Bootstrap class names (not CSS properties)

Getting Help

1. Check the VS Code Extension Guidelines
2. Search existing GitHub Issues
3. Create a new issue with:
   • VS Code version
   • Extension version
   • Steps to reproduce
   • Expected vs actual behavior

📝 Release Notes

v1.0.0

• 🎉 Initial release
• ✅ 400+ Bootstrap v5 snippets with dynamic parameters (including Accordion, Carousel, Dropdowns, Offcanvas, Toasts, and more)
• ✅ Intelligent autocomplete for classes and data attributes
• ✅ Hover documentation for all Bootstrap classes
• ✅ Syntax highlighting for Bootstrap classes
• ✅ Context menu commands for quick insertion
• ✅ Multi-language support (HTML, JS, JSX, TS, PHP, Vue)
• ✅ Customizable settings and preferences
• ✅ Complete Bootstrap v5 component coverage

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Adding New Snippets

1. Edit the appropriate snippet file in snippets/
2. Add the snippet in JSON format
3. Test the snippet works correctly
4. Update this README if needed

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Bootstrap Team for the amazing framework
• VS Code Extension Team for the extensibility API
• Yeoman for the extension generator

📞 Support

• 📧 Email: support@bootstrap-v5-extension.dev
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📖 Documentation: VS Code Extension Docs

Made with ❤️ for the Bootstrap and VS Code community

⭐ If you find this extension helpful, please give it a star!

Enjoy faster Bootstrap development! 🚀