Bootstrap React

Overview

Welcome to Bootstrap’s React Components 👋🏾. Below we’ve detailed the general philosophy that guides all components you’ll find here. You should see a lot of familiar faces, but with some new behaviors, APIs, and other things we think you’ll love. Curious what components are included? Take a look through some of the examples in our menu. Eager to get dive in? Continue reading below to see the easiest way to kick the tires.

This is just an Alpha release, which means we’re still working out a lot of the kinks, but any feedback is (as always) super appreciated. Thanks, and enjoy!

Installation

To make getting started easier than ever, we’ve built a brand new tool called create-bootstrap-app. Run the following command to automatically generate a Next.js project with bootstrap-react fully integrated!

npx create-bootstrap-app

Although create-bootstrap-app is the easiest way to get up and running, you can manually install Bootstrap’s React components directly by running one of the following commands.

# Via npm
npm install bootstrap-react

# Via yarn
yarn add bootstrap-react

Using components

Once you’ve installed bootstrap-react, import each component you need.

import { Alert } from "bootstrap-react";

Then, include them in your JSX like you would any other component.

<Alert>
  <strong>Holy smokes!</strong> I can’t believe Bootstrap is coming to React!
</Alert>

TypeScript

All of Bootstrap’s React components were written from scratch using TypeScript, a typed superset of JavaScript that compiles to plain JavaScript. It gives us the ability to provide detailed, programatic APIs for our components, with type safety, autocomplete, and more. If you haven’t used it before, give it a try!

If you have an existing javascript project, don’t fret you can still import the Bootstrap React components like normal (just no typing 🥺).

Dependencies

Beyond TypeScript and React, Bootstrap React components rely on a number of other open source libraries—of which these components wouldn’t be possible without. These excellent libraries include:

1. Framer Motion : Bring your components to life with simple spring animation primitives.
2. React-Popper : An awesome library used to manage poppers in web applications.
3. Next.js : The React Framework. (Note: only our doc site relies on next.js)

Philosophy 🤓

There were a number of critical design decisions that went into how we authored Bootstrap’s React components. Here’s a quick overview of some of that thinking:

Built on top of Bootstrap’s existing CSS library. Components aren’t shipping with a CSS-in-JS solution, and instead will rely on Bootstrap’s existing compiled CSS. There is so much power built into Bootstrap’s CSS (including themeability) that we felt trying to port that functionality to styled components or similar CSS libraries would have pushed this project back so far it may have never shipped. That coupled with the performance and scalability of a pure CSS approach made us feel like this was the right place for our components to start their life.

Only components. We decided to only rebuild our core Bootstrap components in React. This doesn’t mean you can’t use utilities, it just means we didn’t author special utility wrappers (sorry, no grids, or any of that jazz). That said, all of our components were designed to play nicely with these tools right out of the box.

To add utiltity modifiers to components, include the className prop. Include as many space seperated utilties as you like.

<Badge className="my-3 p-3">chubby label</Badge>

Beyond our core utilities, you can integrate your components directly with grids, form controls, and other tools by using className and/or writing your own components from scratch. Here’s a quick example of how you might create your own InputGroup component using the provided Button component.

<div className="input-group">
  <Button color="secondary" variant="outline">
    Button
  </Button>
  <input
    type="text"
    className="form-control"
    aria-label="Example text with button addon"
  />
</div>

Or, for a more advanced example, add grid classes via the className prop directly to components and HTML elements.

Look at these 2 nerds.

This photo kills me everytime.

Yikes

<Card className="row g-0">
  <div className="col-md-4">
    <img src="…" width="100%" alt="Example" />
  </div>
  <CardBody className="col-md-8">
    <CardTitle>Look at these nerds.</CardTitle>
    <CardText>This photo kills me everytime.</CardText>
    <Button href="#">Yikes</Button>
  </CardBody>
</Card>

All components extend HTML primitives. All components in our library pass through properties to what we consider the root level element of a given component. This means if you provide additional accessibility props, event listeners, or input props, they will automatically be forwarded for you.

<Badge onClick={() => alert("Sup, lil bug 🐛")}>Click me!</Badge>

Functional Components, hooks, and everything else you’d expect. Under the hood we’ve tried to write everything as low level, composable, functional components. We’ve tried to keep our eyes on performance and accessibility, and put a lot of care into making our APIs as simple and approachable as possible—while also being extensible enough to create your own meta components on top of them. That said, this is just an Alpha release, so bare with us as we get this ready for production!

Navigating the docs

So you’re ready to kick the tires and check out the details for yourself!? Use the lefthand navigation and click through some of the Components. The docs should look ✨very ✨ familiar. We’ve included plenty of examples, but each component’s page includes plenty of nitty gritty details on available props and more.