2022-12-29 22:59:33 +01:00
- category : Starters
external : true
description : "Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz."
examples :
- name : CDN starter
description : "Instantly include Bootstrap's compiled CSS and JavaScript via the jsDelivr CDN."
url : /examples/tree/main/starter
- name : Sass & JS
description : "Use npm to import and compile Bootstrap's Sass with Autoprefixer and Stylelint, plus our bundled JavaScript."
url : /examples/tree/main/sass-js
- name : Sass & ESM JS
description : "Import and compile Bootstrap's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim."
url : /examples/tree/main/sass-js-esm
- name : Webpack
description : "Import and bundle Bootstrap's source Sass and JavaScript with Webpack."
url : /examples/tree/main/webpack
- name : Parcel
description : "Import and bundle Bootstrap's source Sass and JavaScript via Parcel."
url : /examples/tree/main/parcel
- name : Vite
description : "Import and bundle Bootstrap's source Sass and JavaScript with Vite."
url : /examples/tree/main/vite
- name : Bootstrap Icons
description : "Import and compile Bootstrap's Sass with Stylelint, PurgeCSS, and the Bootstrap Icons web font."
url : /examples/tree/main/bootstrap-icons
2021-03-22 21:59:14 +01:00
- category : Snippets
description : "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more."
examples :
- name : Headers
description : "Display your branding, navigation, search, and more with these header components"
- name : Heroes
description : "Set the stage on your homepage with heroes that feature clear calls to action."
- name : Features
description : "Explain the features, benefits, or other details in your marketing content."
- name : Sidebars
description : "Common navigation patterns ideal for offcanvas or multi-column layouts."
2021-06-23 04:15:02 +02:00
- name : Footers
description : "Finish every page strong with an awesome footer, big or small."
- name : Dropdowns
description : "Enhance your dropdowns with filters, icons, custom styles, and more."
- name : List groups
description : "Extend list groups with utilities and custom styles for any content."
- name : Modals
description : "Transform modals to serve any purpose, from feature tours to dialogs."
2023-02-15 05:58:39 +01:00
- name : Badges
description : "Make badges work with custom inner HTML and new looks."
- name : Breadcrumbs
description : "Integrate custom icons and create stepper components."
- name : Buttons
description : "Create custom buttons for just about any use case with utilities."
- name : Jumbotrons
description : "Create modernized versions of the classic Bootstrap component."
2021-03-22 21:59:14 +01:00
2019-01-08 17:33:28 +01:00
- category : Custom Components
2022-07-29 21:49:01 +02:00
description : "Brand-new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework."
2018-01-15 01:06:52 +01:00
examples :
- name : Album
description : "Simple one-page template for photo galleries, portfolios, and more."
- name : Pricing
description : "Example pricing page built with Cards and featuring a custom header and footer."
- name : Checkout
description : "Custom checkout form showing our form components and their validation features."
- name : Product
description : "Lean product-focused marketing page with extensive grid and image work."
- name : Cover
description : "A one-page template for building simple and beautiful home pages."
- name : Carousel
description : "Customize the navbar and carousel, then add some new components."
- name : Blog
description : "Magazine like blog template with header, navigation, featured content."
- name : Dashboard
description : "Basic admin dashboard shell with fixed sidebar and navbar."
- name : Sign-in
description : "Custom form layout and design for a simple sign in form."
- name : Sticky footer
description : "Attach a footer to the bottom of the viewport when page content is short."
- name : Sticky footer navbar
description : "Attach a footer to the bottom of the viewport with a fixed top navbar."
2021-03-22 21:59:14 +01:00
- name : Jumbotron
description : "Use utilities to recreate and enhance Bootstrap 4's jumbotron."
2018-01-15 01:06:52 +01:00
- category : Framework
description : "Examples that focus on implementing uses of built-in components provided by Bootstrap."
examples :
- name : "Starter template"
description : "Nothing but the basics: compiled CSS and JavaScript."
- name : Grid
description : "Multiple examples of grid layouts with all four tiers, nesting, and more."
2020-06-09 15:44:20 +02:00
- name : Cheatsheet
description : "Kitchen sink of Bootstrap components."
- name : Cheatsheet RTL
description : "Kitchen sink of Bootstrap components, RTL."
2018-01-15 01:06:52 +01:00
- category : Navbars
description : "Taking the default navbar component and showing how it can be moved, placed, and extended."
examples :
- name : Navbars
description : "Demonstration of all responsive and container options for the navbar."
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
- name : Navbars offcanvas
description : "Same as the Navbars example, but with our offcanvas component."
2018-01-15 01:06:52 +01:00
- name : Navbar static
description : "Single navbar example of a static top navbar along with some additional content."
- name : Navbar fixed
description : "Single navbar example with a fixed top navbar along with some additional content."
- name : Navbar bottom
description : "Single navbar example with a bottom navbar along with some additional content."
2021-03-02 18:10:10 +01:00
- name : Offcanvas navbar
description : "Turn your expandable navbar into a sliding offcanvas menu (doesn't use our offcanvas component)."
2019-06-30 15:59:58 +02:00
2020-06-09 15:44:20 +02:00
- category : RTL
description : "See Bootstrap's RTL version in action with these modified Custom Components examples."
examples :
- name : Album RTL
description : "Simple one-page template for photo galleries, portfolios, and more."
- name : Checkout RTL
description : "Custom checkout form showing our form components and their validation features."
- name : Carousel RTL
description : "Customize the navbar and carousel, then add some new components."
- name : Blog RTL
description : "Magazine like blog template with header, navigation, featured content."
- name : Dashboard RTL
description : "Basic admin dashboard shell with fixed sidebar and navbar."
2019-06-30 15:59:58 +02:00
- category : Integrations
description : "Integrations with external libraries."
examples :
- name : "Masonry"
description : "Combine the powers of the Bootstrap grid and the Masonry layout."