This skill should be used when the user asks about Bootstrap components, "how to create a modal", "navbar not collapsing", "carousel autoplay", "responsive card grid", "toast notifications", "dropdown menu", "accordion FAQ", "offcanvas sidebar", "tab navigation", "tooltip not showing", "popover not working", Bootstrap accordion, alerts, badges, breadcrumb, buttons, button groups, cards, carousel, close button, collapse, dropdowns, list group, modal, navbar, navs and tabs, offcanvas, pagination, placeholders, popovers, progress, scrollspy, spinners, toasts, tooltips, or needs help implementing any Bootstrap UI component.
Inherits all available tools
Additional assets for this skill
This skill inherits all available tools. When active, it can use any tool Claude has access to.
examples/accordion-patterns.htmlexamples/alert-patterns.htmlexamples/badge-button-patterns.htmlexamples/breadcrumb-patterns.htmlexamples/card-grid-patterns.htmlexamples/carousel-patterns.htmlexamples/collapse-patterns.htmlexamples/dropdown-patterns.htmlexamples/list-group-patterns.htmlexamples/modal-patterns.htmlexamples/navbar-patterns.htmlexamples/offcanvas-patterns.htmlexamples/pagination-patterns.htmlexamples/placeholder-patterns.htmlexamples/popovers-tooltips-patterns.htmlexamples/progress-spinner-patterns.htmlexamples/scrollspy-patterns.htmlexamples/tabs-patterns.htmlexamples/toasts-patterns.htmlreferences/components-reference.mdBootstrap provides ready-to-use UI components for building interfaces. This skill covers all major components with usage patterns, JavaScript initialization requirements, and accessibility best practices.
JavaScript Initialization Overview: Some components work purely with data attributes, while others require JavaScript initialization. Components marked with Requires JS below won't function without explicit initialization.
| Component | Requires JS Init | Data Attributes Only |
|---|---|---|
| Tooltip | Yes | No |
| Popover | Yes | No |
| Toast | Yes (to show) | No |
| Scrollspy | Optional | Yes |
| Modal | Optional | Yes |
| Carousel | Optional | Yes |
| Collapse | Optional | Yes |
| Dropdown | Optional | Yes |
These components require or benefit from JavaScript. See references/interactive-components.md for detailed code examples, JavaScript APIs, and accessibility guidance.
Collapsible content panels that show one section at a time. Use .accordion wrapper with .accordion-item children containing .accordion-header and .accordion-collapse. Remove data-bs-parent to allow multiple panels open simultaneously. Use .accordion-flush for borderless variant.
Image slideshow with optional controls and indicators. Use .carousel.slide wrapper with .carousel-inner containing .carousel-item slides. Add .carousel-control-prev/.carousel-control-next for navigation. Use data-bs-ride="carousel" for autoplay. Respects prefers-reduced-motion automatically.
Toggle content visibility with smooth animations. Use data-bs-toggle="collapse" on trigger with data-bs-target pointing to .collapse element. Use .collapse-horizontal for width-based collapse. Target multiple elements with class selector (.multi-collapse).
Toggleable contextual menus for links and actions. Use .dropdown wrapper with .dropdown-toggle button and .dropdown-menu list. Direction variants: .dropup, .dropend, .dropstart. Add .dropdown-menu-dark for dark theme. Keyboard navigation is built-in.
Dialog boxes that overlay the page and trap focus. Use data-bs-toggle="modal" with data-bs-target pointing to .modal element. Sizes: .modal-sm, .modal-lg, .modal-xl. Modifiers: .modal-dialog-centered, .modal-dialog-scrollable. Use data-bs-backdrop="static" to prevent dismiss on outside click.
Hidden sidebars that slide from viewport edge. Positions: .offcanvas-start (left), .offcanvas-end (right), .offcanvas-top, .offcanvas-bottom. Use data-bs-scroll="true" to allow body scrolling. Use data-bs-backdrop="static" for persistent sidebars.
Requires JS init. Rich overlay content triggered by click or hover. Use data-bs-toggle="popover" with title and data-bs-content. Initialize with new bootstrap.Popover(el) or batch initialize all: document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el)). Placements: top, right, bottom, left.
Auto-update navigation based on scroll position. Use data-bs-spy="scroll" on scrollable container with data-bs-target pointing to nav. Use data-bs-root-margin to control activation threshold. Container needs tabindex="0" for keyboard accessibility.
Requires JS to show. Lightweight dismissible notifications. Use .toast-container for positioning and stacking. Initialize with new bootstrap.Toast(el) then call .show(). Options: autohide: true, delay: 5000. Placements via container positioning classes.
Requires JS init. Hover hints for brief descriptions. Use data-bs-toggle="tooltip" with title attribute. Initialize with new bootstrap.Tooltip(el) or batch initialize all: document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el)). Placements: top, right, bottom, left.
These components work primarily with CSS and HTML. See references/static-components.md for detailed code examples and accessibility guidance.
Contextual feedback messages. Use .alert.alert-{color} with role="alert". Colors: primary, secondary, success, danger, warning, info, light, dark. Use .alert-link for styled links. Add .alert-dismissible with close button for dismissible alerts.
Labels, counters, and status indicators. Use .badge.bg-{color} on <span>. Use .rounded-pill for pill shape. Position with .position-absolute utilities for notification badges. Include .visually-hidden text for screen reader context.
Navigation hierarchy indicator. Wrap <ol class="breadcrumb"> in <nav aria-label="breadcrumb">. Use .breadcrumb-item on <li> elements. Mark current page with .active and aria-current="page". Customize divider via --bs-breadcrumb-divider CSS variable.
Interactive button elements. Base: .btn.btn-{color}. Outline: .btn-outline-{color}. Sizes: .btn-lg, .btn-sm. Full width: wrap in .d-grid. States: disabled attribute, .active class. Use <button> for actions, <a> for navigation.
Related buttons grouped together. Use .btn-group with role="group" and aria-label. Vertical: .btn-group-vertical. Toolbar: .btn-toolbar wrapper with role="toolbar". Sizes: .btn-group-lg, .btn-group-sm.
Flexible content containers. Structure: .card > .card-body > .card-title, .card-text. Optional: .card-header, .card-footer, .card-img-top/.card-img-bottom. Grid layout: use .row.row-cols-{n} with .col > .card.h-100 for equal heights.
Generic dismiss button. Use .btn-close with aria-label="Close". White variant: .btn-close-white. Dismiss targets via data-bs-dismiss="alert|modal|offcanvas|toast".
Series of content items as lists. Use .list-group > .list-group-item. Actionable: add .list-group-item-action. Borderless: .list-group-flush. Horizontal: .list-group-horizontal. Colors: .list-group-item-{color}.
Responsive navigation header. Use .navbar.navbar-expand-{breakpoint}. Contains .navbar-brand, .navbar-toggler, .navbar-collapse. Placement: .fixed-top, .fixed-bottom, .sticky-top. Theme: data-bs-theme="dark".
Base navigation with visual styles. Styles: .nav-tabs, .nav-pills, .nav-underline. Layout: .nav-fill (equal width), .nav-justified (full width), .flex-column (vertical). For tabbed content, use role="tablist" with role="tab" buttons and role="tabpanel" panes.
Navigation for paginated content. Use <nav aria-label="..."> > .pagination > .page-item > .page-link. Sizes: .pagination-lg, .pagination-sm. Alignment: .justify-content-center, .justify-content-end. Mark current: .active with aria-current="page".
Loading state indicators. Use .placeholder spans with column widths (.col-6). Animations: wrap in .placeholder-glow or .placeholder-wave. Sizes: .placeholder-lg, .placeholder-sm, .placeholder-xs. Add aria-hidden="true" to placeholder containers.
Progress indicators for tasks. Use .progress wrapper with .progress-bar inside. Set width via style="width: X%". Variants: .progress-bar-striped, .progress-bar-animated. Colors: .bg-{color}. Include ARIA attributes: role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax.
Loading indicators. Types: .spinner-border (spinning), .spinner-grow (pulsing). Sizes: .spinner-border-sm, .spinner-grow-sm. Colors: .text-{color}. Include role="status" and .visually-hidden loading text.
references/components-reference.md - Quick reference tables for all component classesreferences/css-custom-properties.md - CSS custom properties for runtime component themingreferences/interactive-components.md - Detailed documentation for JS-dependent componentsreferences/static-components.md - Detailed documentation for CSS/HTML componentsexamples/accordion-patterns.html - Accordion and FAQ patternsexamples/alert-patterns.html - Alert variants, dismissible alerts, live region patternsexamples/badge-button-patterns.html - Badges, buttons, button groups, and close buttonsexamples/breadcrumb-patterns.html - Breadcrumb navigation with custom dividers and iconsexamples/card-grid-patterns.html - Responsive card grid layoutsexamples/carousel-patterns.html - Carousel implementation patternsexamples/collapse-patterns.html - Collapse, horizontal collapse, and multi-target patternsexamples/dropdown-patterns.html - Dropdown menus, split buttons, and form dropdownsexamples/list-group-patterns.html - List groups, actionable items, and tab integrationexamples/modal-patterns.html - Modal dialog patternsexamples/navbar-patterns.html - Navigation bar layoutsexamples/offcanvas-patterns.html - Offcanvas sidebar patternsexamples/pagination-patterns.html - Pagination variants, alignment, and responsive patternsexamples/placeholder-patterns.html - Loading skeleton patterns for cards, lists, and tablesexamples/popovers-tooltips-patterns.html - Tooltip and popover patterns (requires JS init)examples/progress-spinner-patterns.html - Progress bars and spinner loading indicatorsexamples/scrollspy-patterns.html - Scrollspy with navbar, list group, and documentation patternsexamples/tabs-patterns.html - Tab navigation patternsexamples/toasts-patterns.html - Toast notification patterns (requires JS init)