<!DOCTYPE html><htmllang="en"data-bs-theme="auto"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content="Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins."><metaname="author"content="Mark Otto, Jacob Thornton, and Bootstrap contributors"><metaname="generator"content="Astro v5.4.2"><metaname="docsearch:language"content="en"><metaname="docsearch:version"content="5.3"><linkrel="canonical"href="https://getbootstrap.com/docs/5.3/examples/"><linkrel="preconnect"href="https://AK7KMZKZHQ-dsn.algolia.net"crossorigin><title>Examples · Bootstrap v5.3</title><scriptsrc="/docs/5.3/assets/js/color-modes.js"></script><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"><linkhref="/docs/5.3/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"><linkrel="apple-touch-icon"href="/docs/5.3/assets/img/favicons/apple-touch-icon.png"sizes="180x180"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon-32x32.png"sizes="32x32"type="image/png"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon-16x16.png"sizes="16x16"type="image/png"><linkrel="manifest"href="/docs/5.3/assets/img/favicons/manifest.json"><linkrel="mask-icon"href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg"color="#712cf9"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon.ico"><metaname="theme-color"content="#712cf9"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:site"content="getbootstrap"><metaname="twitter:creator"content="getbootstrap"><metaname="twitter:title"content="Examples"><metaname="twitter:description"content="Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins."><metaname="twitter:image"content="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-social.png"><metaproperty="og:url"content="https://getbootstrap.com/docs/5.3/examples/"><metaproperty="og:title"content="Examples"><metaproperty="og:description"content="Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins."><metaproperty="og:type"content="website"><metaproperty="og:image"content="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-social.png"><metaproperty="og:image:type"content="image/png"><metaproperty="og:image:width"content="2000"><metaproperty="og:image:height"content="1000"><scriptdefersrc="https://cdn.usefathom.com/script.js"data-site="ITUSEYJG"></script><linkrel="stylesheet"href="/_astro/_slug_.BBRoHHoO.css"></head><body><divclass="skippy visually-hidden-focusable overflow-hidden"><divclass="container-xl"><aclass="d-inline-flex p-2 m-1"href="#content">Skip to main content</a></div></div><svgxmlns="http://www.w3.org/2000/svg"class="d-none"><symbolid="arrow-right"viewBox="0 0 16 16"><pathfill-rule="evenodd"d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path></symbol><symbolid="arrow-right-short"viewBox="0 0 16 16"><pathfill-rule="evenodd"d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"></path></symbol><symbolid="book-half"viewBox="0 0 16 16"><pathd="M8.52.687c.654-.6891.782-.8863.112-.7521.234.1242.503.5233.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM81.783C7.015.9365.587.814.287.94c-1.514.153-3.042.672-3.9941.105A.5.500002.5v11a.5.5000.707.455c.882-.42.303-.8813.68-1.021.409-.1422.59.0873.
<svgclass="bi ms-auto d-none"aria-hidden="true"><usehref="#check2"></use></svg></button></li></ul></li></ul></div></div></nav></header><headerclass="py-5 border-bottom"><divclass="container-xxl bd-gutter pt-md-1 pb-md-4"><divclass="row"><divclass="col-xl-8"><h1class="bd-title mt-0">Examples</h1><pclass="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p><divclass="d-flex flex-column flex-md-row gap-3"><ahref="https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-examples.zip"class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold"><svgclass="bi me-2"aria-hidden="true"><usexlink:href="#box-seam"></use></svg>
Download examples
</a><ahref="https://github.com/twbs/bootstrap/archive/v5.3.3.zip"class="btn btn-lg bd-btn-lg btn-outline-secondary"> Download source code</a></div></div><divclass="col-xl-4 d-lg-flex justify-content-xl-end"><scriptasyncsrc="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom"id="_carbonads_js"></script></div></div></div></header><mainclass="bd-content order-1 py-5"id="content"><divclass="container-xxl bd-gutter"><divclass="bd-content"><h2id="starters">Starters</h2><p>Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz.</p><divclass="row"><articleclass="col-md-6 col-lg-4 mb-3 d-flex gap-3"><svgclass="bi fs-5 flex-shrink-0 mt-1"aria-hidden="true"><usexlink:href="#box-seam"></use></svg><div><h3class="h5 mb-1"><aclass="d-block link-offset-1"href="https://github.com/twbs/examples/tree/main/starter/"target="_blank"rel="noopener"id="starter-0">CDN starter</a></h3><pclass="text-body-secondary">Instantly include Bootstrap's compiled CSS and JavaScript via the jsDelivr CDN.</p><p><aclass="icon-link small link-secondary link-offset-1"href="https://stackblitz.com/github/twbs/examples/tree/main/starter?file=index.html"target="_blank"rel="noopener"aria-labelledby="edit-0 starter-0"><svgclass="bi flex-shrink-0"aria-hidden="true"><usexlink:href="#lightning-charge-fill"></use></svg><spanid="edit-0">Edit in StackBlitz</span></a></p></div></article><articleclass="col-md-6 col-lg-4 mb-3 d-flex gap-3"><svgclass="bi fs-5 flex-shrink-0 mt-1"aria-hidden="true"><usexlink:href="#box-seam"></use></svg><div><h3class="h5 mb-1"><aclass="d-block link-offset-1"href="https://github.com/twbs/examples/tree/main/sass-js/"target="_blank"rel="noopener"id="starter-1">Sass & JS</a></h3><pclass="text-body-secondary">Use npm to import and compile Bootstrap's Sass with Autoprefixer and Stylelint, plus our bundled JavaScript.</p><p><aclass="icon-link small link-secondary link-offset-1"href="https://stackblitz.com/github/twbs/examples/tree/main/sass-js?file=index.html"target="_blank"rel="noopener"aria-labelledby="edit-1 starter-1"><svgclass="bi flex-shrink-0"aria-hidden="true"><usexlink:href="#lightning-charge-fill"></use></svg><spanid="edit-1">Edit in StackBlitz</span></a></p></div></article><articleclass="col-md-6 col-lg-4 mb-3 d-flex gap-3"><svgclass="bi fs-5 flex-shrink-0 mt-1"aria-hidden="true"><usexlink:href="#box-seam"></use></svg><div><h3class="h5 mb-1"><aclass="d-block link-offset-1"href="https://github.com/twbs/examples/tree/main/sass-js-esm/"target="_blank"rel="noopener"id="starter-2">Sass & ESM JS</a></h3><pclass="text-body-secondary">Import and compile Bootstrap's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim.</p><p><aclass="icon-link small link-secondary link-offset-1"href="https://stackblitz.com/github/twbs/examples/tree/main/sass-js-esm?file=index.html"target="_blank"rel="noopener"aria-labelledby="edit-2 starter-2"><svgclass="bi flex-shrink-0"aria-hidden="true"><usexlink:href="#lightning-charge-fill"></use></svg><spanid="edit-2">Edit in StackBlitz</span></a></p></div></article><articleclass="col-md-6 col-lg-4 mb-3 d-flex gap-3"><svgclass="bi fs-5 flex-shrink-0 mt-1"aria-hidden="true"><usexlink:href="#box-seam"></use></svg><div><h3class="h5 mb-1"><aclass="d-block link-offset-1"href="https://github.com/twbs/examples/tree/main/color-modes/"target="_blank"rel="noopener"id="starter-3">Bootstrap color modes</a></h3><pclass="text-body-secondary">Import and compile Bootstrap's Sass with Stylelint, and the Bootstrap color modes.</p><p><aclass="icon-link small link-secondary link-offset-1"href="https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html"target="_blank"rel="noopener"aria-labelledby="edit-3 starter-3"><svgclass="bi flex-shrink-0"aria-hidden="true"><usexlink:href="#lightning-charge-fill"></use></svg><spanid="edit-3">Edit in StackBlitz</span></a></p></div>
improvement to suggest?
</p><p><ahref="https://github.com/twbs/bootstrap/issues/new/choose">Please open an issue.</a></p></div><divclass="row"><articleclass="col-sm-6 col-md-3 mb-3"><aclass="d-block link-offset-1"href="/docs/5.3/examples/album-rtl/"hreflang="ar"><imgclass="img-thumbnail mb-3"srcset="/docs/5.3/assets/img/examples/album-rtl.png, /docs/5.3/assets/img/examples/album-rtl@2x.png 2x"src="/docs/5.3/assets/img/examples/album-rtl.png"alt=""width="480"height="300"loading="lazy"><h3class="h5 mb-1">Album RTL</h3></a><pclass="text-body-secondary">Simple one-page template for photo galleries, portfolios, and more.</p></article><articleclass="col-sm-6 col-md-3 mb-3"><aclass="d-block link-offset-1"href="/docs/5.3/examples/checkout-rtl/"hreflang="ar"><imgclass="img-thumbnail mb-3"srcset="/docs/5.3/assets/img/examples/checkout-rtl.png, /docs/5.3/assets/img/examples/checkout-rtl@2x.png 2x"src="/docs/5.3/assets/img/examples/checkout-rtl.png"alt=""width="480"height="300"loading="lazy"><h3class="h5 mb-1">Checkout RTL</h3></a><pclass="text-body-secondary">Custom checkout form showing our form components and their validation features.</p></article><articleclass="col-sm-6 col-md-3 mb-3"><aclass="d-block link-offset-1"href="/docs/5.3/examples/carousel-rtl/"hreflang="ar"><imgclass="img-thumbnail mb-3"srcset="/docs/5.3/assets/img/examples/carousel-rtl.png, /docs/5.3/assets/img/examples/carousel-rtl@2x.png 2x"src="/docs/5.3/assets/img/examples/carousel-rtl.png"alt=""width="480"height="300"loading="lazy"><h3class="h5 mb-1">Carousel RTL</h3></a><pclass="text-body-secondary">Customize the navbar and carousel, then add some new components.</p></article><articleclass="col-sm-6 col-md-3 mb-3"><aclass="d-block link-offset-1"href="/docs/5.3/examples/blog-rtl/"hreflang="ar"><imgclass="img-thumbnail mb-3"srcset="/docs/5.3/assets/img/examples/blog-rtl.png, /docs/5.3/assets/img/examples/blog-rtl@2x.png 2x"src="/docs/5.3/assets/img/examples/blog-rtl.png"alt=""width="480"height="300"loading="lazy"><h3class="h5 mb-1">Blog RTL</h3></a><pclass="text-body-secondary">Magazine like blog template with header, navigation, featured content.</p></article><articleclass="col-sm-6 col-md-3 mb-3"><aclass="d-block link-offset-1"href="/docs/5.3/examples/dashboard-rtl/"hreflang="ar"><imgclass="img-thumbnail mb-3"srcset="/docs/5.3/assets/img/examples/dashboard-rtl.png, /docs/5.3/assets/img/examples/dashboard-rtl@2x.png 2x"src="/docs/5.3/assets/img/examples/dashboard-rtl.png"alt=""width="480"height="300"loading="lazy"><h3class="h5 mb-1">Dashboard RTL</h3></a><pclass="text-body-secondary">Basic admin dashboard shell with fixed sidebar and navbar.</p></article></div></div><divclass="bd-content"><h2id="integrations">Integrations</h2><p>Integrations with external libraries.</p><divclass="row"><articleclass="col-sm-6 col-md-3 mb-3"><aclass="d-block link-offset-1"href="/docs/5.3/examples/masonry/"><imgclass="img-thumbnail mb-3"srcset="/docs/5.3/assets/img/examples/masonry.png, /docs/5.3/assets/img/examples/masonry@2x.png 2x"src="/docs/5.3/assets/img/examples/masonry.png"alt=""width="480"height="300"loading="lazy"><h3class="h5 mb-1">Masonry</h3></a><pclass="text-body-secondary">Combine the powers of the Bootstrap grid and the Masonry layout.</p></article></div></div><hrclass="my-5"><divclass="container"><divclass="text-center"><divclass="masthead-followup-icon d-inline-block mb-2 text-bg-danger"><svgxmlns="http://www.w3.org/2000/svg"fill="currentColor"viewBox="0 0 16 16"height="32"width="32"aria-hidden="true"><pathfill-rule="evenodd"d="M8 16a6 6 0 006-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 006 6zM6.646 4.646c-.376.377-1.272 1.489-2.093 3.13l.894.448c.78-1.559 1.616-2.58 1.907-2.87l-.708-.708z"clip-rule="evenodd"></path></svg></div><h2class="display-6 fw-normal">Go further with Bootstrap Themes</h2><pclass="col-md-10 col-lg-8 mx-auto lead">
Need something more than these examples? Take Bootstrap to the next level with premium themes from the <ahref="https://themes.getbootstrap.com/">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and
Designed and built with all the love in the world by the <ahref="/docs/5.3/about/team">Bootstrap team</a> with the help of <ahref="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.
</li><liclass="mb-2">
Code licensed <ahref="https://github.com/twbs/bootstrap/blob/main/LICENSE"target="_blank"rel="license noopener">MIT</a>, docs <ahref="https://creativecommons.org/licenses/by/3.0/"target="_blank"rel="license noopener">CC BY 3.0</a>.
