Bootstrap Examples: 480+ Live Demos Across 30 Pages

How these Bootstrap examples are built

Every demo runs on Bootstrap 5.3.8, the current stable release, loaded from the jsDelivr CDN with integrity hashes. Each one renders in its own sandboxed frame, so you see exactly what Bootstrap produces, with no theme styles leaking in. Click, type and tab through a demo, then copy its HTML, CSS and JavaScript from the panel underneath.

The demos follow the same rules across all pages:

• Bootstrap first: components, utilities, data attributes and the 5.3 CSS variables do the work, and custom CSS only adds what Bootstrap lacks, scoped to its own class names.
• No extra libraries. Datepickers, charts and sliders are built from Bootstrap pieces and a little vanilla JavaScript.
• Keyboard and screen reader support: labels on every field, the ARIA attributes from the Bootstrap docs and visible focus styles.
• Every demo is checked at phone width, and custom motion sits inside a prefers-reduced-motion query.

After the demos, each page has a guide to the classes, options and accessibility details behind them. Building without a framework? The CSS examples cover the same patterns in plain HTML and CSS.

What are Bootstrap examples and which types does the official set cover?

Bootstrap examples are ready-made HTML, CSS and JavaScript samples for the Bootstrap front-end framework that you copy, run and adapt instead of writing a layout from scratch.

They range from a single navbar snippet to a full dashboard shell.

The official documentation for v5.3.8 lists 50 examples in 7 groups, all downloadable as one zip (bootstrap-5.3.8-examples.zip).

An example shows how to use the framework. A theme restyles every component, and a template is a finished site built on Bootstrap.

Start Bootstrap publishes free, open source Bootstrap 5 themes, templates and snippets, so it sits on the template side of that line. Bootswatch sits on the theme side.

Starters and framework examples

Starters (10):

• CDN starter: compiled CSS and JavaScript from jsDelivr, no build step
• Sass and JS: npm import, with Sass compiled through Autoprefixer and Stylelint, plus a Sass and ESM JS variant that compiles the source JavaScript with an ESM shim
• Bundler starters: Vite, Webpack and Parcel, each importing source Sass and JavaScript
• Framework starters: React (with Next.js and React Bootstrap) and Vue with Vite
• Color modes and Icons: the dark mode setup and the Bootstrap Icons web font

Every starter opens in StackBlitz, so you can test one without installing anything.

The 3 Framework examples sit apart from the starters: a starter template with compiled CSS and JavaScript only, a Grid page, and a Cheatsheet that works as a kitchen sink of components.

Snippets and custom components

Snippets and Custom Components hold 24 of the 50 examples, 12 each.

Snippets extend one component with utilities and custom CSS. The set covers headers, heroes, features, sidebars, footers, dropdowns, list groups, modals, badges, breadcrumbs, buttons and jumbotrons.

Custom Components are whole pages: Album, Pricing, Checkout, Product, Cover, Carousel, Blog, Dashboard, Sign-in, two sticky footer layouts and a utility-built Jumbotron.

Since the 5.3.0 alpha 2 release, snippet markup is ready for dark mode with fewer custom styles, according to the Bootstrap migration guide.

Navbars, RTL and integrations

Six navbar examples. Six RTL examples. One integration.

The Navbars group shows responsive and container options, an offcanvas variant, and static, fixed and bottom placements, plus an Offcanvas navbar that does not use the offcanvas component.

The RTL group repeats Album, Checkout, Carousel, Blog, Dashboard and Cheatsheet in right-to-left layout, and the page labels RTL support as experimental.

The single integration, Masonry, combines the Bootstrap grid with the Masonry layout library.

How to tell which Bootstrap version an example uses

Read the CDN URL first, then the data attributes, then the spacing classes. A version number in the stylesheet link settles it, and the other two checks confirm it.

What breaks when v4 markup meets a v5 stylesheet

A PW Skills examples page dated 30 Oct 2025 still loads Bootstrap 4.5.2 from the stackpath CDN and uses data-toggle and data-target on its navbar.

Paste that markup into a page running 5.3.8 and the symptoms are predictable:

• Navbar toggler, dropdowns, modals and collapse stop responding, because v5 reads data-bs-toggle and data-bs-target
• Margin classes such as ml-3 do nothing, since v5 renamed them ms-3 and me-3
• no-gutters has no effect until it becomes g-0

The reverse fails too. v5 markup on a v4 stylesheet leaves the data-bs attributes unread and the new spacing classes undefined.

jQuery and Popper by version

Bootstrap 5.0.0 dropped jQuery and moved from Popper 1.x to Popper 2.x, per the official migration guide.

A v5 example never needs a jQuery script tag. A v4.6 example does, which is a quick tell when the CDN URL is missing.

Where older versions still live

The official docs keep v5.0.2, 5.1.3 and 5.2.3 next to 5.3.x, and still host v4.6.x, v3.4.1 and v2.3.2.

Tutorial indexes lag behind. The W3Schools Bootstrap examples index lists Glyphicons, Panels, Wells and Affix, and none of those four appears among the v5.3 component pages.

Jumbotron is a special case. The migration guide records the component as dropped in 5.0.0, and the official Jumbotron example now rebuilds it from utilities.

How to run a Bootstrap example with a CDN, npm or a download

A CDN link runs an example from one HTML file with no build step. Use npm when the example needs compiled Sass or a bundler, and the examples zip when you want the official files offline.

CDN route

Steps for a single-file test:

1. Create index.html with the HTML5 doctype and the viewport meta tag.
2. Add the Bootstrap CSS link tag inside the head, pointing at jsDelivr (bootstrap@5.3.8).
3. Add the bundle script tag just before the closing body tag.
4. Paste the example markup into the body.
5. Open the file in a browser.

The doctype matters. Without it, Bootstrap's own docs warn that styling renders incomplete.

The bundle file includes Popper, which dropdowns, tooltips and popovers need. If an example uses none of the three, load the standalone JavaScript file and skip Popper to save a few kilobytes.

Each CDN tag carries an integrity hash tied to one file and one version. Change the version number without changing the hash and the browser refuses the file.

npm route

Start here when an example imports Sass.

The official Sass and JS starter installs Bootstrap through npm and compiles its Sass, and separate starters cover Vite, Webpack and Parcel. Bootstrap 5.0.0 switched the Sass compiler from Libsass to Dart Sass, so older build scripts that call Libsass need updating.

Downloaded examples

The examples zip is the right pick for offline work or for reading the source of a full page example before adapting it.

• Official files, no edits
• Pinned to v5.3.8

Pick rule: CDN to test an idea, npm once you start customizing, the zip when you need the originals on disk.

Grid and layout examples

Bootstrap grid examples build layouts from containers, rows and 12 template columns across six breakpoints, from xs to xxl.

Below 576px (xs) the container fills the full width and columns use the plain col- prefix.

Containers and breakpoints

Bootstrap ships three container types:

• container: fixed max-width that changes at each breakpoint
• container-md and its siblings: 100% wide until the named breakpoint
• container-fluid: 100% wide everywhere

Breakpoints use min-width media queries, so col-sm-4 applies at sm and every size above it. The xxl tier arrived in v5.0.0, which is why v4 examples stop at xl.

Containers are required for the default grid. An example with columns but no container and row around them will misalign.

Nesting, gutters and alignment

Nested rows go inside a column, and their columns should add up to 12 or fewer. More than 12 in one row and the extra columns wrap to a new line.

Gutters are 1.5rem in v5, narrower than the 30px in v4 (Bootstrap migration guide). Control them with g-*, gx-* and gy-*, and use g-0 to remove them.

For card grids, put row-cols-1 row-cols-sm-2 row-cols-md-4 on the row. That pattern replaces the dropped card-deck class.

Layout patterns beyond the grid

Two sticky footer examples pin a footer to the bottom of the viewport when content runs short, one of them paired with a fixed top navbar.

The Masonry integration is the official replacement for the dropped card-columns class, according to the migration guide.

One mismatch is worth knowing. The examples page describes its Grid example as covering all four tiers, while the grid documentation for the same version lists six.

Component examples: navbar, card, modal, carousel, accordion and offcanvas

Most copied components run on Bootstrap JavaScript, and three of them also need Popper. Cards are absent from the official JavaScript list, so they run on CSS alone.

JavaScript bundle: accordion, alert dismissal, carousel, collapse, modal, navbar toggler, offcanvas, tabs, scrollspy and toasts.

JavaScript plus Popper: dropdowns, tooltips and popovers. Load the standalone script without Popper and these three misplace or fail.

Navigation: navbar, dropdown and offcanvas

Navbar rules that changed in v5:

• A container is now required inside the navbar
• The active class goes on nav-link, not nav-item
• navbar-dark is deprecated since 5.3.0 in favor of data-bs-theme="dark"

Copied v4 navbar markup breaks on the first two points, usually with misaligned spacing and a missing active highlight.

Offcanvas is new in v5.0.0. Responsive variants such as offcanvas-lg arrived in 5.2.0, and navbars have accepted offcanvas drawers since 5.1.0.

Dropdown examples run on Popper 2.x, and the default fallback placements changed in v5.

Content: card, carousel, accordion and modal

Four components, four different gotchas.

Card: v4 card-deck and card-columns are gone. Rebuild them with row-cols-* from the grid section above, or with Masonry.

Carousel: indicators and controls target the carousel by ID, so a second copy of the same snippet on one page needs its own ID. The carousel-dark class is deprecated in 5.3.0 in favor of data-bs-theme.

Accordion: v5.0.0 replaced the card-based accordion with a dedicated component, so v4 accordion markup is outdated.

Modal examples in the official Snippets group stretch the component from feature tours to plain dialogs, and every one of them needs the JavaScript bundle.

Form examples and validation

Bootstrap form examples pair form controls and grid layout with one of three validation modes: browser defaults, custom styles driven by a short script, or server-side state classes.

The mode matters more than the markup. It decides what JavaScript the form needs and who can use the result.

Form controls and layout

What a v5 form is built from:

• form-control on text inputs and textareas, form-select on selects, form-check on checkboxes and radios
• form-label on every label, which v5 requires
• Grid classes and utilities for layout, since form-group, form-row and form-inline were dropped in 5.0.0
• Buttons and input-group-text placed directly inside the input group, because input-group-append and input-group-prepend are gone
• Floating labels, promoted to a supported component in 5.0.0

A v4 form that uses custom-select or custom-control classes needs renaming too. They became form-select and form-check (Bootstrap migration guide).

Three validation modes

Three modes, three trade-offs.

Browser defaults: no scripting, but each browser draws its own feedback bubble and CSS cannot style it.

Custom styles: add novalidate to the form, then run a short script that calls checkValidity on submit, blocks invalid submissions and adds was-validated to the form.

Server-side classes: put is-valid or is-invalid on each field yourself, and tie the error text to the field with aria-describedby.

The was-validated wrapper is not optional for custom styles. Without it, every required empty field shows as invalid on page load, according to the Bootstrap validation docs.

Input groups need an extra has-validation class to keep their border radius. Validation styles only cover form-control, form-select and form-check elements.

Login and checkout examples

The official Checkout example is built entirely from Bootstrap's form controls, and each required group shows its validation state when you try to submit the form empty.

Sign-in is the lighter case: a custom layout for a simple sign in form.

There is a catch. The validation docs for v5.3.8 say custom client-side validation styles and tooltips are not exposed to assistive technologies, and they recommend server-side validation or browser defaults instead.

So treat Checkout as a layout reference, not a finished validation pattern. Since 5.3.0 the valid and invalid colors are CSS variables, so they follow the active color mode.

Full-page template examples: landing, dashboard, pricing, blog and sign-in

Pick the page example by the job it does. Pricing, Product, Cover and Carousel handle marketing pages, Dashboard gives you an app shell, Blog and Album cover content, and Sign-in and Checkout cover account flows.

Decision rule: start from a snippet when the site already exists, and from a full page example when it does not.

Marketing pages

• Pricing: cards with a custom header and footer
• Product: a lean product-focused page with heavy grid and image work
• Cover: a one-page template for a simple home page
• Carousel: a customized navbar and carousel, plus a few new components

Pricing and Product lean on cards and the row-cols grid classes, so most layout changes stay in class names.

App shells and account pages

Dashboard is a basic admin shell with a fixed sidebar and navbar. Charts, data tables and authentication are yours to add.

Sign-in and Checkout are the account-side pair. Both are single-purpose forms, so they fit best as the first screen of a flow rather than as a base for a whole site.

Content pages

Content pages are the easiest to adapt.

Blog is a magazine-style layout with header, navigation and featured content, Album suits photo galleries and portfolios, and the two sticky footer layouts keep a footer at the bottom of short pages.

Replace the placeholder text before publishing. The Checkout example, for one, ships a footer reading Company Name with a 2017 to 2025 copyright line.

Where to find Bootstrap examples: official docs, tutorial sites and template libraries

Start with the official examples page, then add tutorial sites for quick demos and template libraries for finished pages.

Pros and cons by source

• Official examples: Pros, matches the current release and downloads as one zip. Cons, plain demo styling and placeholder content.
• W3Schools: Pros, edit-and-run pages. Cons, the version depends on the tutorial path, and the site itself says examples may be simplified for learning.
• Start Bootstrap: Pros, complete page templates. Cons, the version varies from repo to repo.
• Bootswatch: Pros, swap one CSS file and the whole look changes. Cons, it restyles only, and Bootstrap's JavaScript still has to be loaded for dropdowns and modals.
• MDB: Pros, broad galleries of forms, tables and design blocks. Cons, some sections sit behind a Pro login.

Template and theme libraries

W3Schools runs separate Bootstrap 3, 4 and 5 tutorials. The Bootstrap 5 one loads 5.3.8 from jsDelivr, while the site's Bootstrap Examples link still opens the older index.

Start Bootstrap describes its catalog as Bootstrap 5 on its homepage, yet the startbootstrap-resume package still calls itself a Bootstrap 4 theme while installing Bootstrap 5.2.3. Check the version in each repo before downloading.

Bootswatch lists 26 themes tuned for 5.3.8, and NodeBB integrates its theme API.

The official paid themes marketplace is a dead end. As of the October 2026 check, themes.getbootstrap.com redirects to a page titled Sunsetting Bootstrap Themes Customer FAQ.

How to customize a Bootstrap example with Sass, CSS variables and color modes

Use CSS variables for quick overrides on a running page, Sass variables for a compiled build, and the data-bs-theme attribute for dark mode.

Take the lightest route that reaches the value you need, because every step up adds a build process.

Quick overrides with CSS variables

Every Bootstrap custom property carries the bs- prefix, and the root set is available wherever the stylesheet loads.

Component styles keep their own variables on the base class, so a navbar tweak goes on the navbar class instead of a deep selector.

• Reset the page font with var(--bs-font-sans-serif)
• Recolor links with var(--bs-blue)

Two limits apply. CSS variables do not work inside media queries, so the breakpoint variables only help in JavaScript and other CSS contexts, and the Bootstrap team says variable coverage stays incomplete until Bootstrap 6 (migration guide, v5.2.0 notes).

Compiled builds with Sass

Keep Bootstrap's core files untouched and import them from your own stylesheet, a custom.scss that sits next to node_modules.

Import order

1. Import functions
2. Add your variable overrides
3. Import variables and variables-dark
4. Add map overrides
5. Import maps, mixins and root
6. Import the optional partials you use, such as reboot, type and grid
7. Import the utilities API last

Overrides sit after functions and before variables, because Sass cannot reassign a default value once it has been used.

Compile with the Sass CLI: npm install -g sass, then sass --watch ./scss/custom.scss ./css/custom.css.

Failure mode: removing primary, success or danger from the theme colors map can break compilation, because links, buttons and form states use those keys (Bootstrap Sass docs).

Compiling the source with recent Dart Sass also prints deprecation warnings. The v5.3.8 docs say they do not block compilation and can be ignored while a long-term fix is in progress.

Utility API

The utility API generates classes from a Sass map, so you can change the utility set without writing CSS by hand.

• Add a responsive cursor utility with auto, pointer and grab values
• Turn on responsive classes for border
• Drop width and float with map-remove

Every generated utility carries !important, and the enable-important-utilities variable switches that off globally.

Trimming the build

Import only the component partials you use. Dependencies between partials can make removal tricky, per the Bootstrap optimize docs.

The JavaScript works the same way. The bootstrap.js file ships every plugin, so a bundler project can import just the modal plugin.

Dark mode toggle

Set data-bs-theme="dark" on the html element for the whole page, or on a single component to scope it. A dark dropdown on a light page is one attribute.

No built-in picker: Bootstrap ships none. The docs provide a toggler script that stores the choice in localStorage, falls back to the system setting, and works best at the top of the page to reduce flicker on reload.

Automatic mode: setting the Sass color mode type to media-query follows prefers-color-scheme, but per-component themes stop working. Setting enable-dark-mode to false compiles dark mode out.

Custom modes: any data-bs-theme value works, such as blue, as long as you override the shared CSS variables for it.

Failure mode: a new theme color needs entries in the extra Sass maps for text, subtle background and subtle border, in both light and dark versions. Skip them and alerts and list groups will not pick the color up, which the docs call a manual process.

When a Bootstrap example is the wrong starting point

Skip a copied example when the project runs inside a component framework, must support Internet Explorer 11, has strict accessibility targets, or will drift far from Bootstrap's default look.

• Component frameworks: React-Bootstrap reimplements Bootstrap's JavaScript, so it is not automatically compatible with themes that extend the default JavaScript, and a stylesheet is still required.
• Internet Explorer 11: v5.0.0 dropped IE 10 and 11 (Bootstrap migration guide), and the W3Schools Bootstrap 5 tutorial states that Internet Explorer 11 and down is not supported, so IE11 projects stay on Bootstrap 4 or 3.
• Accessibility targets: Bootstrap's accessibility docs warn that some default palette combinations fall below the WCAG 2.2 contrast ratios of 4.5:1 for text and 3:1 for non-text elements, especially on light backgrounds.
• Both text directions: serving LTR and RTL in one stylesheet through PostCSS RTLCSS grows the file by 20% to 30% on average, per the Bootstrap RTL docs.
• Heavy custom design: Bootstrap's own approach page prefers utilities over custom styles, yet a design that fights the defaults ends up stacking overrides.

Copied components may also need extra ARIA roles and attributes. The accessibility docs put that work on the author, since the result depends on the markup you ship.

Rule of thumb: if an example needs more custom CSS than Bootstrap classes, start from the Sass build and change variables instead.

Bootstrap Examples FAQ

Can I use Bootstrap examples in a commercial project?

Yes. Bootstrap's code is MIT licensed, and so are the Bootswatch themes and Start Bootstrap templates.

Keep the license notice with any copied code. The documentation text is CC BY 3.0, which asks for attribution.

Which Bootstrap example should a beginner start with?

The starter template. It holds nothing but compiled CSS and JavaScript, so there is no extra styling to untangle.

Move to the Grid example next, then the Cheatsheet, a kitchen sink of components.

How do I add Bootstrap Icons to an example?

Load them separately. Bootstrap Icons is its own library, not part of the framework CSS, and the official Icons starter shows the web font route with Sass.

Since 5.3.0 the icon-link helper also lines an icon up beside a text link.

Are Bootstrap examples responsive without extra CSS?

Yes, as long as the page keeps the responsive grid classes and the viewport meta tag. Bootstrap is built mobile first, so styles scale up from small screens.

Drop the viewport meta tag and phones render the page at desktop width.