Starters
Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz.
CDN starter
Instantly include Bootstrap's compiled CSS and JavaScript via the jsDelivr CDN.
Sass & JS
Use npm to import and compile Bootstrap's Sass with Autoprefixer and Stylelint, plus our bundled JavaScript.
Sass & ESM JS
Import and compile Bootstrap's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim.
Bootstrap color modes
Import and compile Bootstrap's Sass with Stylelint, and the Bootstrap color modes.
Bootstrap Icons
Import and compile Bootstrap's Sass with Stylelint, PurgeCSS, and the Bootstrap Icons web font.
React
Import and bundle Bootstrap's source Sass and JavaScript with React, Next.js, and React Bootstrap.
Snippets
Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/headers.png)
Headers
Display your branding, navigation, search, and more with these header components
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/heroes.png)
Heroes
Set the stage on your homepage with heroes that feature clear calls to action.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/features.png)
Features
Explain the features, benefits, or other details in your marketing content.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/sidebars.png)
Sidebars
Common navigation patterns ideal for offcanvas or multi-column layouts.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/footers.png)
Footers
Finish every page strong with an awesome footer, big or small.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/dropdowns.png)
Dropdowns
Enhance your dropdowns with filters, icons, custom styles, and more.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/list-groups.png)
List groups
Extend list groups with utilities and custom styles for any content.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/modals.png)
Modals
Transform modals to serve any purpose, from feature tours to dialogs.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/badges.png)
Badges
Make badges work with custom inner HTML and new looks.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/breadcrumbs.png)
Breadcrumbs
Integrate custom icons and create stepper components.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/buttons.png)
Buttons
Create custom buttons for just about any use case with utilities.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/jumbotrons.png)
Jumbotrons
Create modernized versions of the classic Bootstrap component.
Custom Components
Brand-new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/album.png)
Album
Simple one-page template for photo galleries, portfolios, and more.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/pricing.png)
Pricing
Example pricing page built with Cards and featuring a custom header and footer.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/checkout.png)
Checkout
Custom checkout form showing our form components and their validation features.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/product.png)
Product
Lean product-focused marketing page with extensive grid and image work.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/cover.png)
Cover
A one-page template for building simple and beautiful home pages.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/carousel.png)
Carousel
Customize the navbar and carousel, then add some new components.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/blog.png)
Blog
Magazine like blog template with header, navigation, featured content.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/dashboard.png)
Dashboard
Basic admin dashboard shell with fixed sidebar and navbar.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/sign-in.png)
Sign-in
Custom form layout and design for a simple sign in form.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/sticky-footer.png)
Sticky footer
Attach a footer to the bottom of the viewport when page content is short.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/sticky-footer-navbar.png)
Sticky footer navbar
Attach a footer to the bottom of the viewport with a fixed top navbar.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/jumbotron.png)
Jumbotron
Use utilities to recreate and enhance Bootstrap 4's jumbotron.
Framework
Examples that focus on implementing uses of built-in components provided by Bootstrap.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/starter-template.png)
Starter template
Nothing but the basics: compiled CSS and JavaScript.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/grid.png)
Grid
Multiple examples of grid layouts with all four tiers, nesting, and more.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/cheatsheet.png)
Cheatsheet
Kitchen sink of Bootstrap components.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/cheatsheet-rtl.png)
Cheatsheet RTL
Kitchen sink of Bootstrap components, RTL.
Navbars
Taking the default navbar component and showing how it can be moved, placed, and extended.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/navbars.png)
Navbars
Demonstration of all responsive and container options for the navbar.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/navbars-offcanvas.png)
Navbars offcanvas
Same as the Navbars example, but with our offcanvas component.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/navbar-static.png)
Navbar static
Single navbar example of a static top navbar along with some additional content.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/navbar-fixed.png)
Navbar fixed
Single navbar example with a fixed top navbar along with some additional content.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/navbar-bottom.png)
Navbar bottom
Single navbar example with a bottom navbar along with some additional content.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/offcanvas-navbar.png)
Offcanvas navbar
Turn your expandable navbar into a sliding offcanvas menu (doesn't use our offcanvas component).
RTL
See Bootstrap's RTL version in action with these modified Custom Components examples.
RTL is still experimental and will evolve with feedback. Spotted something or have an improvement to suggest?
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/album-rtl.png)
Album RTL
Simple one-page template for photo galleries, portfolios, and more.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/checkout-rtl.png)
Checkout RTL
Custom checkout form showing our form components and their validation features.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/carousel-rtl.png)
Carousel RTL
Customize the navbar and carousel, then add some new components.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/blog-rtl.png)
Blog RTL
Magazine like blog template with header, navigation, featured content.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/dashboard-rtl.png)
Dashboard RTL
Basic admin dashboard shell with fixed sidebar and navbar.
Integrations
Integrations with external libraries.
![](/manual/bootstrap5/zh/docs/5.3/assets/img/examples/masonry.png)
Masonry
Combine the powers of the Bootstrap grid and the Masonry layout.
Go further with Bootstrap Themes
Need something more than these examples? Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
Browse themes![Bootstrap Themes](/manual/bootstrap5/zh/docs/5.3/assets/img/bootstrap-themes-collage.png)