New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,457
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon

Integrate Bootstrap and Storybook

Bootstrap is a powerful, extensible, and feature-packed frontend toolkit. This recipe shows you how to get the most out of Bootstrap in Storybook.

This recipe assumes that you are using Storybook >=7.0 using the getting started guide. Don’t have this? Then run:

How to setup Bootstrap and Storybook

Bootstrap is a popular library for quickly building UI with ready-made CSS classes, while Storybook is a tool for creating and testing UI components in isolation. This post will show you how to integrate these two tools to create a powerful and flexible development environment for building user interfaces with Bootstrap.

This post will explain how to:

  1. 🔌 Setup Bootstrap in Storybook using CSS or Sass
  2. 🎨 Switch betweens themes in a click

If you’d like to see the example code of this recipe, check out the example repository on GitHub. Let's get started!

Completed styled-components example with theme switcher

How to setup Bootstrap

CSS

Start by installing some dependencies.

Now register the addon styling in your .storybook/main.js.

Finally, import the Bootstrap files in your .storybook/preview.js file.

Sass

Start by installing some dependencies.

Now register the addon styling in your .storybook/main.js

Finally, import your index.scss file in your .storybook/preview.js file.

Add a theme switcher

Bootstrap now ships with a dark mode that you can activate by adding a [data-bs-theme] data attribute to a parent element.

To enable switching between these modes in a click for your stories, use our withThemeByDataAttribute decorator by adding the following code to your .storybook/preview.js file.

Get involved

Now you're ready to use Bootstrap with Storybook. 🎉 Check out the example repo for a quick start.

If you use Bootstrap at work, we'd love your feedback on the Bootstrap + Storybook experience. Join the maintainers in Discord to get involved, or jump into addon docs.

Join the community
6,319 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI