Bootstrap 5 Components

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

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

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

A Bootstrap 5 Container is the foundational layout element that centers and horizontally p…

A Bootstrap 5 Grid Row is a horizontal wrapper — created with the `.row` class — that cont…

Bootstrap 5's CSS Grid system is an opt-in alternative to the standard flexbox-based grid,…

A Bootstrap 5 Grid Column (col) is a horizontal division within a .row container that uses…

Bootstrap 5's Stack component is a shorthand helper built on flexbox that arranges child e…

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

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

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

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

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

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

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

A Sidebar Nav is a vertical navigation panel fixed to the left (or right) edge of a layout…

Bootstrap 5 Tab Content is a navigation pattern that pairs a set of clickable tab triggers…

A Mega Menu is an expanded dropdown navigation panel that reveals multiple columns of link…

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

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

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

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

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

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

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

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

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

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

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

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

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

The Bootstrap 5 Figure component provides semantic HTML structure for displaying images or…

Bootstrap 5's Image Thumbnail component adds a rounded border and padding around an image …

Bootstrap 5's Lead Text component uses the `.lead` class to make a paragraph visually larg…

A Feature Box is a self-contained content block that pairs an icon or image with a heading…

A Counter component in Bootstrap 5 displays animated numeric statistics that increment fro…

A Client Logo component is a horizontal or grid-based display of partner, client, or integ…

A Bootstrap 5 Card Group renders multiple cards as a single connected unit with equal-heig…

A Callout is a styled block element used to draw attention to important information, warni…

Bootstrap 5 Display Headings are oversized heading styles — `.display-1` through `.display…

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

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

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

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

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

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

A Bootstrap 5 contact form is a structured HTML form component that collects user input — …

A Newsletter Form in Bootstrap 5 is an inline or stacked email capture component used to c…

Bootstrap 5's file upload component is built on the native HTML `<input type='file'>` elem…

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

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

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

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

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

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

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

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

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

A Loading Overlay is a full-screen or container-scoped UI layer that blocks interaction an…

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

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

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

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

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

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

Bootstrap 5 Collapse is a JavaScript-powered utility that toggles the visibility of conten…

Social Icons in Bootstrap 5 are inline icon links — typically using icon fonts like Bootst…

The Bootstrap 5 divider is a reusable UI component that provides consistent styling and be…