Step 1: Install Bootstrap

              npm install react-bootstrap bootstrap
             

Step 2: Create a dashboard using React

src/components/Dashboard.tsx

              

             import React from 'react';
            import { Container, Row, Col, Navbar, Nav, Button, Card } from 'react-bootstrap';
            import 'bootstrap/dist/css/bootstrap.min.css';

            function Dashboard() {
              return (
                <Container fluid>
                  {/* Navbar */}
                  <Navbar bg="dark" variant="dark" expand="lg">
                    <Navbar.Brand href="#">My Dashboard</Navbar.Brand>
                    <Navbar.Toggle />
                    <Navbar.Collapse className="justify-content-end">
                      <Nav>
                        <Nav.Link href="#profile">Profile</Nav.Link>
                        <Nav.Link href="#logout">Logout</Nav.Link>
                      </Nav>
                    </Navbar.Collapse>
                  </Navbar>

                  {/* Body */}
                  <Row className="mt-3">
                    {/* Sidebar */}
                    <Col md={2} className="bg-light vh-100 p-3">
                      <h5>Sidebar</h5>
                      <Nav className="flex-column">
                        <Nav.Link href="#">Dashboard</Nav.Link>
                        <Nav.Link href="#">Users</Nav.Link>
                        <Nav.Link href="#">Settings</Nav.Link>
                      </Nav>
                    </Col>

                    {/* Main Content */}
                    <Col md={10} className="p-4">
                      <h3>Welcome to your dashboard</h3>
                      <Row>
                        <Col md={4}>
                          <Card className="mb-3">
                            <Card.Body>
                              <Card.Title>Total Users</Card.Title>
                              <Card.Text>1,250</Card.Text>
                            </Card.Body>
                          </Card>
                        </Col>
                        <Col md={4}>
                          <Card className="mb-3">
                            <Card.Body>
                              <Card.Title>Revenue</Card.Title>
                              <Card.Text>$25,000</Card.Text>
                            </Card.Body>
                          </Card>
                        </Col>
                        <Col md={4}>
                          <Card className="mb-3">
                            <Card.Body>
                              <Card.Title>Sales</Card.Title>
                              <Card.Text>320</Card.Text>
                            </Card.Body>
                          </Card>
                        </Col>
                      </Row>
                      <Button variant="primary">Generate Report</Button>
                    </Col>
                  </Row>
                </Container>
              );
            }

            export default Dashboard;




              

Step 3: Use the Component in App

             import React from "react";
            import 'bootstrap/dist/css/bootstrap.min.css';

            import Dashboard from './components/Dashboard';




            class App extends React.Component {
                render() {
                    return <Dashboard />;
                }
            }

            export default App;