Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
Starters
Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz.
To get working OUDS Web examples based on the Bootstrap ones, you need to replace all bootstrap occurrences with ouds-web in some files.
You may need to tweak a bit Sass files.
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.
Framework
Examples that focus on implementing uses of built-in components provided by OUDS Web.
Font
Multiple examples of fonts to see them in action.
Grid
Multiple examples of grid layouts with all four tiers, nesting, and more.
Grid system
OUDS Web default grid system illustration.
Live examples
How to use some components in real-life examples using Javascript.
Loading buttons
Use loading buttons in an accessible way.
Bootstrap examples
Examples that are the exact ones from Bootstrap to see how the enable Bootstrap compatibility work. Do not modify and do not use.
Bootstrap $enable-bootstrap-compatibility: true
Cheatsheet
Kitchen sink of Bootstrap components.
Album
Simple one-page template for photo galleries, portfolios, and more.
Pricing
Example pricing page built with Cards and featuring a custom header and footer.
Checkout
Custom checkout form showing our form components and their validation features.
Product
Lean product-focused marketing page with extensive grid and image work.
Cover
A one-page template for building simple and beautiful home pages.
Carousel
Customize the navbar and carousel, then add some new components.
Blog
Magazine like blog template with header, navigation, featured content.
Dashboard
Basic admin dashboard shell with fixed sidebar and navbar.
Sign-in
Custom form layout and design for a simple sign in form.
Sticky footer
Attach a footer to the bottom of the viewport when page content is short.
Sticky footer navbar
Attach a footer to the bottom of the viewport with a fixed top navbar.
Jumbotron
Use utilities to recreate and enhance Bootstrap 4's jumbotron.