--- name: bootstrap-components description: 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. --- # Bootstrap 5.3 Components Bootstrap 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 | ## Interactive Components These components require or benefit from JavaScript. See `references/interactive-components.md` for detailed code examples, JavaScript APIs, and accessibility guidance. ### Accordion 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. ### Carousel 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. ### Collapse 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`). ### Dropdowns 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. ### Modal 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. ### Offcanvas 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. ### Popovers **Requires JS init and Popper.js.** Rich overlay content triggered by click or hover. Use `data-bs-toggle="popover"` with `data-bs-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. Use `bootstrap.bundle.js` (includes Popper) or include Popper separately before `bootstrap.js`. ### Scrollspy 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"` so keyboard-only users can focus and scroll the container without a mouse. ### Toasts **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. ### Tooltips **Requires JS init and Popper.js.** Hover hints for brief descriptions. Use `data-bs-toggle="tooltip"` with `data-bs-title` (preferred) or `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. Tooltips on disabled buttons require a wrapper `` or `
` with `tabindex="0"` for keyboard accessibility. Use `bootstrap.bundle.js` (includes Popper) or include Popper separately before `bootstrap.js`. ## Static Components These components work primarily with CSS and HTML. See `references/static-components.md` for detailed code examples and accessibility guidance. ### Alerts 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. ### Badges Labels, counters, and status indicators. Use `.badge.bg-{color}` on ``. Use `.rounded-pill` for pill shape. Position with `.position-absolute` utilities for notification badges. Include `.visually-hidden` text for screen reader context. ### Breadcrumb Navigation hierarchy indicator. Wrap `
    ` in `