DOCSEARCHbyAlgolia
Submit Docs

Bootstrap Examples

repository·main·Indexed 20 days ago

https://github.com/twbs/examples

Functional examples and starter templates for building applications with Bootstrap using various modern web development tools, frameworks, and build pipelines. Includes setups for React with Next.js, Vue, Vite, Webpack, Parcel, and basic CDN integration, as well as specialized examples for color modes and Bootstrap Icons.

Tokens
4.5K
Snippets
20
Records
23
Agent score
71%

What's inside twbs-examples

  1. Overview of Bootstrap Sass & JS example

    main

    This example provides a way to include Bootstrap's source Sass and compiled JavaScript bundle via npm. It integrates several tools for a complete development workflow:

    • Autoprefixer: For cross-browser CSS compatibility.
    • Stylelint: For maintaining Sass code quality.
    • Popper: A peer dependency of Bootstrap's JS required for positioning dropdowns, popovers, and tooltips.

  2. Choose a Bootstrap setup pattern

    main

    The twbs/twbs/examples repository provides various functional templates for integrating Bootstrap into different development environments. Choose a directory based on your preferred build tool or framework:

    Basic & CDN

    • Starter: Uses CDN links for Bootstrap CSS and JS. Best for quick prototyping without a build step.

    Modern Build Tools (Sass & JS)

    • Sass & JS: Import Sass, Autoprefixer, Stylelint, and the Bootstrap JS bundle via npm.
    • Sass & ESM JS: Import Sass, Autoprefixer, and Stylelint via npm, then load Bootstrap's ESM JS using a shim.
    • Parcel: Uses Parcel to manage Sass and JS.
    • Vite: Uses Vite to manage Sass and JS.
    • Webpack: Uses Webpack to import and bundle Sass and JS.

    Framework-Specific

    • React: Uses React and Next.js with Sass and React Bootstrap components.
    • Vue: Uses Vue and Vite to manage Sass and JS.

    Specialized Features

    • Color modes: Demonstrates color mode support and includes a color mode picker (built on the Sass & ESM JS example).
    • Bootstrap Icons font: Demonstrates importing and compiling Sass, Stylelint, PurgeCSS, and the Bootstrap icon font.
    • PurgeCSS: Demonstrates importing Sass with PurgeCSS and JS via npm.

  3. Edit the Bootstrap Color Modes example in the browser

    main

    You can experiment with the Bootstrap Color Modes example directly in your browser using StackBlitz without setting up a local environment.

    https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html

  4. Set up the Bootstrap Icons Font example

    main

    To run the Bootstrap Icons Font example locally, clone the repository, navigate to the specific example directory, install the dependencies, and start the development server.

    Note: This example demonstrates how to include Bootstrap Icons via npm alongside Sass, Autoprefixer, and PurgeCSS.

    git clone https://github.com/twbs/examples.git
cd examples/icons-font/
npm install
npm start

  5. Setup Bootstrap Sass & JS example

    main

    To run the Bootstrap Sass & JS example locally, clone the repository, navigate to the sass-js directory, install the dependencies, and start the development server.

    git clone https://github.com/twbs/examples.git
cd examples/sass-js/
npm install
npm start

  6. Run the Bootstrap w/ React example in the browser

    main

    You can explore and edit this Bootstrap + React + Next.js implementation directly in your browser using StackBlitz without local setup.

    https://stackblitz.com/github/twbs/examples/tree/main/react-nextjs?file=src%2Fpages%2Findex.tsx

  8. Edit the Bootstrap Sass & ESM JS example in the browser

    main

    You can experiment with this Bootstrap Sass and ESM JS setup directly in your browser using StackBlitz without local installation.

    https://stackblitz.com/github/twbs/examples/tree/main/sass-js-esm?file=index.html

  9. Set up the Bootstrap Color Modes example

    main

    To run the Bootstrap Color Modes example locally, clone the repository, navigate to the color-modes directory, install the dependencies, and start the development server.

    This example includes:

    • Bootstrap source Sass
    • ES Module version of Bootstrap JavaScript plugins
    • Pre-release version of Bootstrap color modes functionality
    • Autoprefixer for cross-browser CSS
    • Stylelint for Sass code quality
    • Popper (peer dependency for Bootstrap JS positioning)
    git clone https://github.com/twbs/examples.git
cd examples/color-modes/
npm install
npm start

  10. Use the Bootstrap starter template

    main

    The Bootstrap starter template provides a minimal setup that includes Bootstrap CSS and JS via the jsDelivr CDN. This is ideal for quick prototyping without a local build step.

    # Clone the repository
git clone https://github.com/twbs/examples.git

# Navigate to the starter directory
cd examples/starter/

# Open the index.html file in your browser
open index.html

  11. Set up Bootstrap with Webpack

    main

    This example demonstrates how to include Bootstrap's source Sass and individual JavaScript plugins using Webpack. To run this example locally, clone the repository, navigate to the webpack directory, install dependencies, and start the development server.

    git clone https://github.com/twbs/examples.git
cd examples/webpack/
npm install
npm start

  12. Set up Bootstrap with Parcel

    main

    This example demonstrates how to include Bootstrap's source Sass and individual JavaScript plugins using the Parcel bundler. To run this local development environment, clone the repository, navigate to the parcel directory, install dependencies, and start the development server.

    git clone https://github.com/twbs/examples.git
cd examples/parcel/
npm install
npm start