Bootstrap Expert Plugin

A comprehensive Claude Code plugin for Bootstrap 5.3.8 and Bootstrap Icons front-end development.

Features
Prerequisites
Installation
Quick Start
Skills
Commands
Agent
Bootstrap Version
Contributing
License

Features

9 Specialized Skills - Deep expertise aligned with Bootstrap's documentation structure
Component Generator - Interactive command to generate Bootstrap components
Proactive Agent - Autonomous assistant for Bootstrap development tasks

Prerequisites

Claude Code installed and configured

Installation

From GitHub (Recommended)

# Add the marketplace
/plugin marketplace add sjnims/bootstrap-expert

# Install the plugin
/plugin install bootstrap-expert@bootstrap-expert-marketplace

Or use the full URL:

/plugin marketplace add https://github.com/sjnims/bootstrap-expert
/plugin install bootstrap-expert@bootstrap-expert-marketplace

Local Development

claude --plugin-dir /path/to/bootstrap-expert

Quick Start

Once the plugin is loaded, you can:

Ask Bootstrap questions - Skills load automatically based on your question:

"How do I create a responsive navbar?"
"What's the Bootstrap grid system?"
"How do I add form validation?"

Generate components - Use the command to create Bootstrap components:

/bootstrap-expert:component navbar
/bootstrap-expert:component modal --centered --scrollable
/bootstrap-expert:component card --with-image --horizontal

Get proactive help - The agent triggers automatically when you're working on Bootstrap-related tasks.

Skills

Skill	Description
`bootstrap-overview`	Getting started, installation, project setup, browser support
`bootstrap-customize`	Sass variables, CSS custom properties, theming, color modes
`bootstrap-layout`	Grid system, containers, breakpoints, columns, CSS Grid
`bootstrap-content`	Typography, images, tables, figures, Reboot
`bootstrap-forms`	Form controls, validation, input groups, floating labels
`bootstrap-components`	All UI components (modals, navbars, cards, accordions, etc.)
`bootstrap-helpers`	Clearfix, ratios, stacks, stretched links, visually hidden
`bootstrap-utilities`	Spacing, colors, display, flex, position, sizing, text
`bootstrap-icons`	Icons library installation, usage, styling, accessibility

Commands

`/bootstrap-expert:component [component-name]`

Generate Bootstrap component code interactively or with full arguments.

Interactive mode:

/bootstrap-expert:component navbar

With arguments:

/bootstrap-expert:component navbar --dark --fixed-top --with-search

Supported components:

accordion - Collapsible content panels
alert - Alert messages
badge - Contextual labels and counters
breadcrumb - Breadcrumb navigation
button / buttons - Button variants and styles
button-group - Grouped buttons
card - Card layouts with images, headers, footers
carousel - Image/content sliders
collapse - Collapsible content sections
dropdown - Dropdown menus
form - Form layouts with validation
list-group - List items with actions
modal - Modal dialogs with customizable options
navbar - Navigation bars with various configurations
offcanvas - Offcanvas sidebars
pagination - Page navigation
placeholders - Loading placeholder animations
popover - Pop-up information boxes
progress - Progress bars
spinner - Loading indicators
table - Responsive data tables
tabs / nav-tabs - Tabbed navigation
toast - Toast notifications
tooltip - Hover tooltips

Agent

The bootstrap-expert agent triggers proactively when Bootstrap-related work is detected, helping with:

Component Implementation - Guidance on implementing Bootstrap components correctly
Layout Troubleshooting - Solving grid system and responsive design issues
Accessibility - Ensuring components meet WCAG guidelines with proper ARIA attributes
Code Review - Reviewing Bootstrap code for best practices and optimization

Example triggers:

Creating or editing HTML files with Bootstrap classes
Discussing responsive layouts or

...

sjnims/bootstrap-expert

README