bootstrap-components

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