Bootstrap Grid Class Booster

⚠️ Disclaimer ⚠️

This is not the official Visual Studio Code extension. This is a community-created extension that enhances Bootstrap grid classes in HTML files by automatically managing responsive breakpoints and custom classes.

Features

• Automatic Breakpoint Management: Automatically adds missing breakpoint classes (xxl, xl, lg, md, sm) to ensure consistent responsive behavior
• Smart Class Ordering: Maintains a consistent order of breakpoint classes (xxl → xl → lg → md → sm → base)
• Custom Label Support: Automatically adds special-custom-label class when custom-label is present
• Warning System: Shows warnings for incomplete breakpoint classes with quick fixes
• Auto-formatting on Save: Optional automatic formatting of HTML files on save
• Context Menu Integration: Process files and folders directly from the explorer context menu

Usage

Command Palette

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Type "Bootstrap Grid" to see available commands:
   • "Process Bootstrap Grid Classes" - Process current file
   • "Process Bootstrap Grid Classes in File" - Process a specific file
   • "Process Bootstrap Grid Classes in Folder" - Process all HTML files in a folder
   • "Process Bootstrap Grid Classes in Workspace" - Process all HTML files in workspace

Context Menu

The extension adds several context menu options:

1. File Context Menu (Right-click on HTML file in explorer):

   • "Process Bootstrap Grid Classes in File"

2. Folder Context Menu (Right-click on folder in explorer):

   • "Process Bootstrap Grid Classes in Folder"
   • "Process Bootstrap Grid Classes in Workspace"

3. Editor Context Menu (Right-click in HTML editor):

   • "Process Bootstrap Grid Classes in File"

Quick Fixes

When the extension detects incomplete breakpoint classes, it provides quick fixes:

1. Hover over the warning to see available breakpoints
2. Click the lightbulb icon or press Ctrl+. (Cmd+. on macOS)
3. Select "Add missing breakpoints" to automatically add them

Examples

<!-- Before -->
<div class="col-md-6 col-lg-4 my-3">
    Content
</div>

<!-- After -->
<div class="my-3 col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
    Content
</div>

<!-- This will be processed because it has col-md-8 -->
<div class="col-md-8 my-3">
    <!-- Will become: my-3 col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12 -->
</div>

<!-- This will NOT be processed because it has no breakpoint classes -->
<div class="my-3 p-4 bg-light">
    <!-- Will remain unchanged -->
</div>

Settings

The extension provides the following settings:

• bootstrapGridBooster.autoFormatOnSave: Automatically format HTML files on save (default: false)
• bootstrapGridBooster.showBreakpointWarnings: Show warnings for incomplete breakpoint classes (default: true)
• bootstrapGridBooster.enabledBreakpoints: Configure which breakpoints should be used (default: all enabled)
  • xxl: Enable/disable xxl breakpoint (≥1400px)
  • xl: Enable/disable xl breakpoint (≥1200px)
  • lg: Enable/disable lg breakpoint (≥992px)
  • md: Enable/disable md breakpoint (≥768px)
  • sm: Enable/disable sm breakpoint (≥576px)
  • xs: Enable/disable xs breakpoint (<576px)

To modify these settings:

1. Open VS Code Settings
2. Search for "Bootstrap Grid Booster"
3. Adjust the settings as needed

Example Settings

{
  "bootstrapGridBooster.enabledBreakpoints": {
    "xxl": true,    // Enable xxl breakpoint
    "xl": true,     // Enable xl breakpoint
    "lg": true,     // Enable lg breakpoint
    "md": true,     // Enable md breakpoint
    "sm": false,    // Disable sm breakpoint
    "xs": true      // Enable xs breakpoint
  }
}

When a breakpoint is disabled, the extension will skip it and use the next available breakpoint's value. For example, if sm is disabled, the extension will use the md breakpoint's value for smaller screens.

Breakpoint Behavior

The extension follows these rules for breakpoint classes:

1. Only processes elements that have at least one breakpoint class (e.g., col-md-*, col-lg-*, etc.)
2. Preserves ALL existing breakpoint classes, even if they're not enabled in settings
3. Only adds missing breakpoint classes for enabled breakpoints
4. Always adds col-12 when the xs breakpoint is enabled in settings
5. Maintains strict ordering hierarchy: xxl → xl → lg → md → sm → col-12

Example with partial breakpoints enabled:

<!-- Settings -->
{
    "bootstrapGridBooster.enabledBreakpoints": {
        "xxl": false,
        "xl": false,
        "lg": false,
        "md": true,
        "sm": true,
        "xs": true
    }
}

<!-- Input -->
<div class="col-md-6 col-sm-4">
    Content
</div>

<!-- Output -->
<div class="col-md-6 col-sm-4 col-12">
    Content
</div>

Example with all breakpoints enabled:

<!-- Input -->
<div class="col-md-6 col-sm-4 col-xl-8">
    Content
</div>

<!-- Output -->
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-6 col-sm-4 col-12">
    Content
</div>

Note:

• The base class (col-12) is always added when the xs breakpoint is enabled in settings
• Existing breakpoint classes are never removed, even if their breakpoint is disabled in settings
• Only missing breakpoint classes are added for enabled breakpoints
• Classes are always ordered in the hierarchy: xxl → xl → lg → md → sm → col-12

Custom Label Support

The extension automatically adds special-custom-label class when custom-label is present:

<!-- Input -->
<div class="custom-label col-md-6">

<!-- Output -->
<div class="custom-label special-custom-label col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">

Requirements

• VS Code 1.60.0 or higher
• HTML files

Extension Settings

This extension contributes the following settings:

• bootstrapGridBooster.autoFormatOnSave: Enable/disable automatic formatting on save
• bootstrapGridBooster.showBreakpointWarnings: Enable/disable breakpoint warnings

Known Issues

• None at the moment

Release Notes

See CHANGELOG.md for release notes.

Contributing

We welcome your feedback and suggestions to improve these snippets.

License

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

Acknowledgments

• Thanks to the VS Code team for their extensible editor & excellent extension API
• Thanks to all contributors who have helped improve this extension

Support

If you find this extension helpful, please consider:

• Sharing the extension
• Starring the repository
• Reporting bugs
• Suggesting new features
• Giving appropriate rating of extension on marketplace