twbs / examples

Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more!

Bootstrap Examples

Functional examples for building with Bootstrap using popular tools and frameworks.
Explore Bootstrap docs »

Directory

• Starter – CDN links for our CSS and JS
• Sass & JS — Import Sass, Autoprefixer, Stylelint, and our JS bundle via npm
• Sass & ESM JS — Import Sass, Autoprefixer, and Stylelint via npm, and then load our ESM JS with a shim
• Color modes – Color mode support and color mode picker built on our Sass & ESM JS example
• Bootstrap Icons font - Import and compile Sass, Stylelint, PurgeCSS, and our icon font
• Parcel - Sass, JS via Parcel
• React - Sass with React Bootstrap components using React and Next.js
• Vite - Sass, JS via Vite
• Vue - Sass, JS via Vue/Vite
• Webpack - Import and bundle Sass and JS with Webpack
• PurgeCSS - import sass w/ purgecss and js via npm

License

Licensed under the MIT License.

examples's Issues

Parcel Example Not Working On Stackblitz.

This is the error message. straight from bootstrap docs.

How to add Autoprefixer

I want to connect Autoprefixer to the Vite setup.
Need help, thanks.

Add a Vue3/Vite example

I have submitted a pull request at #5 to illustrate the issue I have encountered.

I am having trouble getting bootstrap to import into a basic Vue3/Vite app. I have studied the other examples in this repository, and cannot figure out what I am missing.

When the project builds, the following error is generated:

ENOENT: no such file or directory, stat '[base path]/vite-vue/node_modules/bootstrap/scss/bootstrap'

This is coming from the vite:css plugin, and I can find no information about how to configure that plugin correctly.

I have verified my vite.config.js has the correct ~bootstrap alias by hard-coding the path to node_modules/bootstrap/scss/bootstrap, and the same error occurs. If I reference the _bootstrap.scss file directly, another error occurs because the inline comments are unrecognized.

Any assistance would be greatly appreciated!

Add Bootstrap Icons (scss) to Webpack example

screensh 3

V5.3.0 undefined *dark variables

When I use sample scss files in V5.3.0, I receive the following errors:
"primary": $primary-text-emphasis-dark,

screenshot 1

Add build steps to every example

Would be lovely to add build steps to each example and then run them on GitHub Actions.

Setup Netlify

It might be a little trickier but if we move with #114 it should be easier

mox_202

screenshot 2

mox_04

Sass compilation broken in `sass-js-esm` project

Go to sass-js-esm project and run npm i ; npm run start:

> [email protected] css
> npm-run-all css-compile css-prefix


> [email protected] css-compile
> sass --style compressed --source-map --embed-sources --no-error-css --load-path=node_modules scss/:css/

Error: Undefined variable.
    ╷
135 │     --#{$prefix}body-color: #{$body-color-dark};
    │                               ^^^^^^^^^^^^^^^^
    ╵
  bootstrap/scss/_root.scss 135:31                          @content
  node_modules/bootstrap/scss/mixins/_color-mode.scss 17:7  color-mode()
  bootstrap/scss/_root.scss 133:3                           @import
  scss/styles.scss 45:9                                     root stylesheet
ERROR: "css-compile" exited with 65.
[nodemon] app crashed - waiting for file changes before starting...

Multi-page Vite example

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

There is no instruction for production build with Vite JS & also how we can configure multipage bootstrap website using vite. please include a details documentation in the existing vite doc part.

Motivation and context

Using Vite with Bootstrap for product ready website is confusing because there isn't any instruction about that.

pdf?

scrsh wedit 01

Route to stylesheet functions fails w/ Parcel

pnpm start

> [email protected] start C:\laragon\www\bootstrap-parcel
> parcel serve src/index.html --public-url / --dist-dir dist

Server running at http://localhost:1234
� Build failed.

@parcel/transformer-sass: Can't find stylesheet to import.
   ╷
34 │ @import "bootstrap/scss/functions";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\scss\styles.scss 34:9  root stylesheet

  Error: Can't find stylesheet to import.
     ╷
  34 │ @import "bootstrap/scss/functions";
     │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
    src\scss\styles.scss 34:9  root stylesheet
      at Object.wrapException (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:1252:43)
      at C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:81769:25
      at _wrapJsFunctionForAsync_closure.$protected (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:4022:15)
      at _wrapJsFunctionForAsync_closure.call$2 (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:33876:12)
      at _awaitOnObject_closure.call$1 (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:33864:32)
      at Object._rootRunUnary (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:4408:18)
      at StaticClosure.<anonymous> (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:115492:16)
      at _CustomZone.runUnary$2$2 (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:35300:39)
      at _Future__propagateToListeners_handleValueCallback.call$0 (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:34363:51)
      at Object._Future__propagateToListeners (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:4201:93)

Add Gulp example

Why not add Gulp example https://gulpjs.com/ ?

Estilo escuro da documentação

Descrição da questão

Adicionar estilo escuro à documentação

Exemplo de uso
n/a

Floating labels not working in Parcel example

In Parcel example, Floating labels work only when I remove the following code from examples/parcel/node_modules/bootstrap/scss/forms/_floating-labels.scss

// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill {
  ~ label {
    opacity: $form-floating-label-opacity;
    transform: $form-floating-label-transform;
  }
}

Steps to reproduce the issue:

1. In examples/parcel/src/scss/styles.scss, uncomment @import "bootstrap/scss/forms";
2. Add floating labels example to examples/parcel/src/index.html

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

3. npm install
4. npm start (the label won't float when focused)
5. Remove/Comment the above SCSS and it works

---

Not working on: Chrome 108.0.5359.71 (This version is outdated) on Ubuntu 16.04

Works on:
Firefox on Ubuntu 16.04 and Chrome 112 on Windows 11

Remove dist/build folders if not needed

Color modes data-bs-theme selector

Silly question; why does the color modes example ship with <body data-bs-theme="auto"> in index.html but in color-modes.js the setTheme is applied to document.documentElement instead of document.querySelector('body') for instance?

mox1

Add CI for each project

• testing build
• lint

etc

Feel free to CC me if someone starts working on it.

mox_01.jpg

The Dropdown navbar is not working properly on the getbootstrap website

inventory - support swipe to confirm expected zero

planned inventory
if expected Zero
in the list of items support swipe left to confirm Zero without opening item page

Functions should be imported first , as the official docs recommends. Vite example

Reading the Vite example, I note that functions are imported after variable overrides:

examples/vite/src/scss/styles.scss

Line 40 in 2a7f56d

@import "~bootstrap/scss/functions";

Official docs recommend include the functions first:
https://getbootstrap.com/docs/5.3/customize/sass/#importing

mox_0402

Enable Dependabot checks

If Dependabot is able to check sub-directories, we might want to enable Dependabot for this repository in order to be informed when there are new versions of Wepack, Parcel, Vite, etc. so that we can bump the packages versions and check if everything's still working.

Enable Dependabot for each sub-projects

Our examples are technically sub-projects that have their own dependencies in their package.json.

We should enable Dependabot for each sub-dir:

• color-modes
• icons-font
• parcel
• sass-js-esm
• sass-js
• starter
• vite
• vue
• webpack

ATM I only update "vite" deps because I think of it thanks to the notification I receive of their new releases.

Add a couple of root scripts for maintenance

Like clean all package-lock.json files, update deps etc.

mox_203

Update examples to v5.3.0 stable

For when we ship the stable release.

Explore switching to npm workspaces

https://docs.npmjs.com/cli/v9/using-npm/workspaces?v=true

20403

screensh 4

Add Example of Using Bootstrap with React JS frontend library

Hello , I would like to add example of some demo react JS pages showing how we can utilize Bootstrap in React .
Currently there are no react examples

Match the ordering of parts in the file with the documentation

In the example here

functions are below the customizations

But in

https://getbootstrap.com/docs/5.3/customize/sass/

The functions are above the customizations. And it even gives a 1. 2. 3. order to make that seem significant.

Add Bootstrap Icons SVG (sprite) example

• Use SVGs
• Generate a custom sprite somehow (do we need to change twbs/icons at all?)

Vue StackBlitz example broken since the beginning

Trying 6422758 on StackBlitz: https://stackblitz.com/github/twbs/examples/tree/6422758f7fece281a675557ff102d9d9688ed685/vue?file=index.html fails.

It also fails for main.

header mail

mox02

mox_201

Error Bootstrap site Toasts page

Make sure all scripts work in each project

Currently there are failures in some projects. Adding CI will help us for sure #95

What does server.hot option in vite.config file?

in vite/vite.config.js file:

export default {
  server: {
    port: 8080,
    hot: true
  }
}

What does the 'hot: true' option does? I can't find that option in vite official docs.