How to use bootstrap with React Js

Last updated : October 14, 2022

The react-bootstrap npm package is what I use in React Js. Its usage is straightforward.

1. Install react-bootstrap npm package

npm install react-bootstrap bootstrap
yarn add react-bootstrap bootstrap

2. Import Bootstrap CSS

Import Bootstrap CSS in index.js file
import "bootstrap/dist/css/bootstrap.min.css"

If I want the CDN instead, I can import the CSS file in my index.html in the public folder.


3. Use the Bootstrap components

Now I can start using Bootstrap in my components.

import { Button, Container } from "react-bootstrap"
export const App = () => {
      <Container className="p-3">
      <h1 className="header">Welcome To React-Bootstrap</h1>
        A simple Bootstrap component
export default App

Simple Bootstrap Form example

Here is a simple example of what I can do with React Bootstrap.

import { Button, Container, Form } from "react-bootstrap"
export const App = () => {
    <Container style={{width: "50%"}}>
      <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="" />
        <Form.Text className="text-muted">
          Your email is safe with us!

      <Form.Group className="mb-3" controlId="formBasicPassword">
        <Form.Control type="password" placeholder="Password" />
        <Form.Text className="text-muted">
          Must be at least 16 characters long 

      <Form.Group className="mb-3" controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Keep me loged in" />

      <Button variant="success" type="submit">Sign up</Button>

export default App
Simple React Bootstrap Form
Figure 1 : Simple React Bootstrap Form
L Raney
By: L Raney
Lance is a software engineer with over 15 years of experience in full-stack software development.

Comments are disabled

No Comments