Guide · Open source
How to use reactstrap: install, import and build with Bootstrap components
Updated · written with AI from the project's own documentation and checked against our catalogue data
Reactstrap is a set of React components for Bootstrap 5, including buttons, tooltips and dropdowns. This guide shows how to install it with npm, import Bootstrap's CSS, and use components instead of raw Bootstrap HTML and class names. After reading it, you will be able to set up a React project with reactstrap and understand the main props and composition pattern the library uses.
reactstrapreactstrap/reactstrap · ★ 10.5k · MIT Install options & downloads Quick start
- 1Create or open a React project. Use create-react-app as the README suggests, or open an existing React project with Node.js and npm installed.
- 2Install Bootstrap. Run npm i bootstrap in the project folder. Reactstrap does not include Bootstrap CSS.
- 3Install reactstrap. Run npm i reactstrap react react-dom to add reactstrap and its React peer dependencies.
- 4Import Bootstrap CSS. Add import 'bootstrap/dist/css/bootstrap.css'; to src/index.js.
- 5Import and use a component. Import the component you need, such as Button, from reactstrap and use it in your render output with props like color and size.
- 6Use children and state props for interactive parts. For tooltips, dropdowns and popovers, pass content through children and manage isOpen and toggle in your component.
Check the prerequisites before you start
You need Node.js and npm, plus React. The README suggests starting with create-react-app to get a basic project structure, then adding reactstrap and Bootstrap to it.
Reactstrap is React-only, and it is built for Bootstrap 5. If your project uses Bootstrap 4, the README says to use Reactstrap v8 instead.
- Node.js and npm installed
- A React project (the README uses create-react-app)
- Bootstrap 5 as the target version; use Reactstrap v8 for Bootstrap 4
Install Bootstrap and reactstrap with npm
Reactstrap does not include Bootstrap's CSS, so you install Bootstrap separately. Run the two install commands from the README in your project folder.
- Install Bootstrap first, then reactstrap with React and React DOM as required peer dependencies.
npm i bootstrap
npm i reactstrap react react-domImport Bootstrap CSS and reactstrap components
Import the Bootstrap stylesheet once, in src/index.js as the README shows. Then import only the reactstrap components you need in src/App.js or your own component files.
- Import the CSS in src/index.js
- Import components by name, for example Button, in the file where you use them
import 'bootstrap/dist/css/bootstrap.css';
import { Button } from 'reactstrap';Use components with props instead of raw HTML classes
Instead of writing Bootstrap class names by hand, you pass props. The README gives several examples: color applies color classes, size controls size classes, and isOpen and toggle handle state for components such as dropdowns, popovers and tooltips.
Boolean props are used where possible for alternative style classes or visually-hidden content. The tag prop lets you change the element or component that gets rendered.
- color: applies color classes, for example <Button color="danger"/>
- size: controls size classes, for example <Button size="sm"/>
- isOpen: current state for dropdowns, popovers and tooltips
- toggle: callback that changes isOpen in the controlling component
- tag: renders a different element name or Component
<Button color="danger" size="sm">Delete</Button>Pass content as children and link triggers with target
The README asks you to pass content through props.children rather than named props. For tooltips, the preferred pattern is to put a trigger element with an id in your markup, then render a Tooltip whose target matches that id and whose children hold the tooltip content.
Reactstrap relies on Popper.js, via react-popper, for positioning tooltips, popovers and auto-flipping dropdowns. The library does not depend on jQuery or Bootstrap's JavaScript.
- Put the content in children, not in named props
- Give the trigger element an id and set the same value as target on Tooltip
<p>
This is a <a href="#" id="TooltipExample">tooltip</a> example.
<Tooltip target="TooltipExample">
<TooltipContent/>
</Tooltip>
</p>Find more examples and documentation
The full documentation is at reactstrap.github.io, and its search is powered by Algolia's DocSearch. The README also links to CodeSandbox examples you can run in the browser. For local development of the library itself, the README lists yarn commands, but most app developers only need the npm install steps above.
- Documentation: https://reactstrap.github.io
- CodeSandbox examples: https://github.com/reactstrap/code-sandbox-examples
- Contributing guide: CONTRIBUTING.md in the repository
What people use it for
- Admin dashboards and internal tools that should follow the Bootstrap look and feel
- Projects that want Bootstrap styling in React without jQuery or Bootstrap's own JavaScript
- Adding tooltips, popovers and auto-flipping dropdowns positioned with Popper.js
- Building reusable components on top of reactstrap, using the component-template project the README mentions
Frequently asked questions
How do I install reactstrap?
Run npm i bootstrap, then npm i reactstrap react react-dom in your project. Reactstrap does not include Bootstrap's CSS, so you need to install Bootstrap too and import its CSS file.
Does reactstrap include Bootstrap CSS?
No. The README states that reactstrap does not include Bootstrap CSS, so you install Bootstrap separately and import bootstrap/dist/css/bootstrap.css into your project.
Is reactstrap free to use?
Reactstrap is released under the MIT licence, as listed on its npm and GitHub pages. Check the LICENSE file in the repository for the full terms.
Which version of reactstrap should I use with Bootstrap 4?
The README says that if you are using Bootstrap 4, you should use Reactstrap v8. The current reactstrap release targets Bootstrap 5.
Can I use reactstrap without React?
No. Reactstrap is a React-only library, and react and react-dom are required peer dependencies that are not bundled with it.
How does reactstrap compare to react-bootstrap?
Both are React libraries for Bootstrap. The source only names react-bootstrap and Reactstrap v8 as comparable projects and does not give a detailed feature comparison, so test both on your own project before choosing.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Reactstrap suits React developers who already know Bootstrap and want its styling as components, especially for admin dashboards and internal tools. It is a poor fit if you do not use React, if you are on Bootstrap 4 (use Reactstrap v8), or if you want a non-Bootstrap design system.
Install options & downloads