REACT Bootstrap

React Bootstrap is a popular front-end framework that brings the power of Bootstrap into React as reusable components. It allows you to create responsive, mobile-first web applications with pre-styled components without using jQuery.

1. Install React Bootstrap

You can install React Bootstrap using npm or yarn:

npm install react-bootstrap bootstrap

or

yarn add react-bootstrap bootstrap

Import Bootstrap CSS

After installation, import the Bootstrap CSS in your index.js or App.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

2. Basic Example with React Bootstrap

Here’s a simple example using a Button component from React Bootstrap:

import React from "react";
import { Button } from "react-bootstrap";

const App = () => {
  return (
    <div>
      <h1>React Bootstrap Example</h1>
      <Button variant="primary">Click Me</Button>
    </div>
  );
};

export default App;
  • The variant prop changes the button style (primary, secondary, danger, etc.).

3. Common React Bootstrap Components

React Bootstrap provides several built-in components to simplify UI development.

Buttons

<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="warning">Warning</Button>
<Button variant="outline-primary">Outline Primary</Button>

Grid System (Responsive Layout)

React Bootstrap has a flexbox-based grid system similar to regular Bootstrap:

import { Container, Row, Col } from "react-bootstrap";

<Container>
  <Row>
    <Col md={6} sm={12}>Column 1</Col>
    <Col md={6} sm={12}>Column 2</Col>
  </Row>
</Container>
  • md={6} makes the column half-width on medium+ screens.
  • sm={12} makes the column full-width on small screens.

4. React Bootstrap Navbar (Navigation Bar)

import { Navbar, Nav } from "react-bootstrap";

<Navbar bg="dark" variant="dark" expand="lg">
  <Navbar.Brand href="#">My Website</Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="me-auto">
      <Nav.Link href="#">Home</Nav.Link>
      <Nav.Link href="#">About</Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>
  • bg="dark" makes the navbar dark.
  • expand="lg" makes the navbar responsive.
  • Navbar.Toggle adds a hamburger menu on small screens.

 

5. React Bootstrap Cards (UI Containers)

import { Card } from "react-bootstrap";

<Card style={{ width: "18rem" }}>
  <Card.Img variant="top" src="https://via.placeholder.com/150" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>This is a sample card.</Card.Text>
  </Card.Body>
</Card>
  • Card.Img adds an image.
  • Card.Body holds the content.

6. React Bootstrap Forms (Inputs)

import { Form, Button } from "react-bootstrap";

<Form>
  <Form.Group controlId="formBasicEmail">
    <Form.Label>Email address</Form.Label>
    <Form.Control type="email" placeholder="Enter email" />
  </Form.Group>

  <Form.Group controlId="formBasicPassword">
    <Form.Label>Password</Form.Label>
    <Form.Control type="password" placeholder="Password" />
  </Form.Group>

  <Button variant="primary" type="submit">Submit</Button>
</Form>
  • Form.Control is used for input fields.
  • controlId helps with accessibility.

7. React Bootstrap Modal (Pop-up Dialog)

import { useState } from "react";
import { Modal, Button } from "react-bootstrap";

const MyModal = () => {
  const [show, setShow] = useState(false);

  return (
    <>
      <Button variant="primary" onClick={() => setShow(true)}>Open Modal</Button>
      <Modal show={show} onHide={() => setShow(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>Modal Content Here</Modal.Body>
      </Modal>
    </>
  );
};

export default MyModal;
  • show={show} controls the modal visibility.
  • onHide={() => setShow(false)} closes the modal.

8. React Bootstrap Alerts

import { Alert } from "react-bootstrap";

<Alert variant="success">This is a success alert!</Alert>
<Alert variant="danger">This is a danger alert!</Alert>
<Alert variant="info">This is an info alert!</Alert>
  • variant="success" changes the alert color.

 

9. React Bootstrap Table

import { Table } from "react-bootstrap";

<Table striped bordered hover>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alice</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bob</td>
      <td>30</td>
    </tr>
  </tbody>
</Table>
  • striped adds alternating row colors.
  • bordered adds table borders.
  • hover highlights rows when hovered.

 

10. React Bootstrap Accordion (Collapsible Sections)

import { Accordion } from "react-bootstrap";

<Accordion>
  <Accordion.Item eventKey="0">
    <Accordion.Header>Section 1</Accordion.Header>
    <Accordion.Body>This is the content of section 1.</Accordion.Body>
  </Accordion.Item>
  <Accordion.Item eventKey="1">
    <Accordion.Header>Section 2</Accordion.Header>
    <Accordion.Body>This is the content of section 2.</Accordion.Body>
  </Accordion.Item>
</Accordion>
  • Accordion.Item defines collapsible sections.

 

11. Deploying a React Bootstrap App

After building your React Bootstrap app, you can deploy it using:

  • Vercel (vercel deploy)
  • Netlify (npm run build → Upload build folder)
  • GitHub Pages (npm run build → gh-pages deployment)