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:
- 🔌 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!
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.