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…

A feature grid is a structured layout that presents a set of product benefits, service hig…

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…

An announcement bar is a full-width, horizontally centred strip that sits above the primar…

A step wizard is a multi-step navigation pattern that guides users through a sequential pr…

A notification dropdown is a navbar-integrated panel that reveals a scrollable list of use…

A Bootstrap 5 breadcrumb with schema is a navigation trail component that shows a user's c…

A sticky header is a navigation bar that remains fixed at the top of the viewport as the u…

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…

A FAQ accordion is a vertically stacked list of questions where each answer panel expands …

A vertical timeline is a custom UI pattern that renders a chronological list of events alo…

An avatar group is a horizontal stack of circular user profile images that overlap one ano…

A Pricing Toggle is a UI control that switches a pricing section between two billing perio…

A testimonial slider is a rotating set of customer or user quotes displayed one at a time,…

A comparison table is a structured UI pattern that places two or more options side by side…

A CTA (call-to-action) banner is a full-width or contained section that combines a headlin…

A logo cloud is a horizontal or grid-based row of partner, client, or sponsor brand marks …

A stats band is a full-width horizontal strip that presents a small set of key metrics or …

A profile card is a self-contained UI block that presents a person's avatar, name, role, a…

An image lightbox is an overlay pattern that displays a full-size image above the page con…

A rating stars component displays a row of star icons that represent a score, typically on…

A Logo Marquee is a horizontally scrolling strip that displays a row of client, partner, o…

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 search bar is a focused input pattern that combines a text field with a submit trigger, …

The Bootstrap 5 Toggle Switch is a styled checkbox input that renders as a sliding on/off …

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…

An empty state is a UI pattern displayed when a container has no data to show — such as an…

A skeleton loader is a placeholder UI that mimics the shape and layout of real content whi…

An inline alert is a Bootstrap 5 contextual message displayed directly within the page lay…

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…

A Sticky CTA is a fixed-position bar or button that remains visible at the bottom (or top)…