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 >=6.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:

🔌 Setup Bootstrap in Storybook using CSS or Sass
🎨 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.