Reference

Bootstrap 5 Components

Classes, code examples, variants, and Canvas-specific patterns for every major Bootstrap 5 component.

Layout

Hero Section

A hero section is the large, prominent area at the top of a web page — the first thing vis…

section.py-5 (custom — no dedicated BS5 hero class)

Footer

A website footer is the section at the bottom of every page containing navigation links, l…

footer (HTML5 semantic element + Bootstrap grid)

Sticky Sidebar

A Sticky Sidebar is a layout pattern where a secondary column remains fixed in the viewpor…

.sticky-sidebar

Navigation

Navbar

The Bootstrap 5 navbar is a responsive navigation header component that automatically coll…

.navbar

Tabs

Bootstrap 5 tabs provide a way to present related content in separate panels that users sw…

.nav-tabs / .nav-pills

Offcanvas

Bootstrap 5 offcanvas is a sidebar/drawer component that slides in from the left, right, t…

.offcanvas

Breadcrumb

A breadcrumb is a secondary navigation aid that shows the user's current page location wit…

.breadcrumb

Dropdown

The Bootstrap 5 Dropdown is a toggleable context menu component built on the Popper.js pos…

.dropdown

Nav Pills

Bootstrap 5 Nav Pills are a navigation component that styles links as pill-shaped tab butt…

.nav-pills

Nav Tabs

Bootstrap 5 Nav Tabs transform a standard navigation list into a tabbed interface that sho…

.nav-tabs

Content

Pricing Table

A pricing table displays product or service tiers side-by-side, allowing visitors to compa…

.card (base component)

Card

The Bootstrap 5 card is a flexible content container with optional header, footer, body, a…

.card

Accordion

The Bootstrap 5 accordion is a collapsible content panel component that shows one (or mult…

.accordion

Carousel

The Bootstrap 5 carousel is a slideshow component for cycling through images, slides, or o…

.carousel

Table

Bootstrap 5 provides extensive table styling via opt-in classes applied to standard HTML t…

.table

Feature Section

A feature section showcases the key benefits or capabilities of a product or service. In B…

row + col grid (no dedicated component)

Testimonial Section

A testimonial section displays customer quotes, reviews, or case study highlights to build…

.card / blockquote (HTML5 semantic element)

CTA Section

A CTA (call-to-action) section is a dedicated page section focused on driving a single con…

section + .btn (no dedicated component)

List Group

The Bootstrap 5 List Group is a flexible component for displaying a series of related cont…

.list-group

Icon Box

An Icon Box is a content component that pairs an icon with a heading and short description…

.icon-box

Team Member Card

A Team Member Card is a Bootstrap 5 UI component that displays a person's photo, name, job…

.team-card

Timeline

A Timeline component in Bootstrap 5 is a vertically or horizontally arranged sequence of e…

.timeline

Stat Counter

A Stat Counter is a Bootstrap 5 UI component that displays key metrics or numerical achiev…

.stat-counter

Forms

Bootstrap 5 provides a comprehensive form styling system including inputs, selects, checkb…

.form-control / .form-select / .form-check

Form Floating Label

Bootstrap 5 floating labels are animated form labels that start inside the input field as …

.form-floating

Form Select

The Bootstrap 5 Form Select component is a styled dropdown input element that lets users c…

.form-select

Input Group

Bootstrap 5 Input Groups extend standard form controls by allowing you to prepend or appen…

.input-group

Button Group

Bootstrap 5 Button Groups wrap a series of buttons into a single, visually connected unit …

.button-group

Login Form

A Bootstrap 5 Login Form is a structured authentication interface built using Bootstrap's …

.login-form

Feedback

Modal

A Bootstrap 5 modal is a dialog box that appears on top of the current page, requiring use…

.modal

Alert

Bootstrap 5 alerts provide contextual feedback messages for user actions. Eight colour var…

.alert

Toast

Bootstrap 5 toasts are lightweight, non-disruptive notification messages that appear tempo…

.toast

Progress Bar

Bootstrap 5 progress bars display the progress of a task or metric as a filled horizontal …

.progress / .progress-bar

Spinner

Bootstrap 5 spinners are CSS-only loading indicators that communicate to users that an ope…

.spinner-border / .spinner-grow

Progress Bar

The Bootstrap 5 progress bar displays task completion or metric levels as a filled horizon…

.progress + .progress-bar

Cookie Banner

A Cookie Banner is a fixed notification UI component that informs visitors about cookie us…

.cookie-banner

Popover

Bootstrap 5 Popovers are floating overlay panels triggered by user interaction (click or h…

.popover

Placeholder (Skeleton)

Bootstrap 5 Placeholders (also called skeleton screens) are loading-state UI elements that…

.placeholder

Utilities

Badge

Bootstrap 5 badges are small labelling components used to add counts, status labels, tags,…

.badge

Ratio

The Bootstrap 5 ratio helper creates responsive elements that maintain a specific aspect r…

.ratio

Back to Top Button

A Back to Top button is a fixed-position UI element that appears after the user scrolls pa…

.back-to-top

Close Button

The Bootstrap 5 Close Button is a pre-styled dismissal control rendered as a transparent b…

.close-button

Scroll To Top

A Scroll To Top button is a fixed-position UI element that appears after the user scrolls …

.scroll-to-top

Dark Mode Toggle

A Dark Mode Toggle is a UI control — typically a checkbox-based switch or button — that al…

.dark-mode-toggle

Generate complete Bootstrap 5 pages

Canvas Builder assembles Bootstrap 5 components into complete, professional layouts. Describe your page and get production-ready HTML in ~3 minutes.

Start Generating