Top 10 React Bootstrap Components For Every Project

React bootstrap is the frontend components library which is inspired from twitter bootstrap. Let us see 10 components of bootstrap which are very useful in any kind of project.

1. Buttons

Without buttons, there is no action possible. In order to use them we first include buttons component and then define that.

import Button from 'react-bootstrap/Button';

<Button variant="primary">Primary</Button>

2. Images

For images, it provides a number of helpful props like rounded, fluid, thumbnail etc.

import Image from 'react-bootstrap/Image'

<Row>
    <Col xs={6} md={4}>
      <Image src="..." rounded />
    </Col>
</Row>

You may also like –

3. Forms

Without forms you can’t take inputs. This is one of the most important html element which is used throughout any application.

import Form from 'react-bootstrap/Form';

<Form.Control type="email" placeholder="Enter email" />
<Form.Control type="password" placeholder="Password" />
<Form.Check type="checkbox" label="Check me out" />
<Form.Control as="select">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
</Form.Control>
<Form.Control type="range" />
<Button variant="primary" type="submit">
    Submit
  </Button>

When the form is complex and there are multiple buttons, then always set type=”button” in those which do not act as submit button otherwise form will submit with the press of any button.

4. Modals

Modals are used to bring focus of users to something important like errors, forms, notices etc. They are also used to display content without navigating users to different page.

import Modal from 'react-bootstrap/Modal';

<Modal.Dialog>
  <Modal.Header closeButton>
    <Modal.Title>Modal title</Modal.Title>
  </Modal.Header>

  <Modal.Body>
    <p>Modal body text goes here.</p>
  </Modal.Body>

  <Modal.Footer>
    <Button variant="secondary">Close</Button>
    <Button variant="primary">Save changes</Button>
  </Modal.Footer>
</Modal.Dialog>

5. Navbars

Navbars or navigation bars are the header elements which connects and gives direction to the application. It helps in navigation properly.

import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'

<Navbar bg="light" expand="lg">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#link">Link</Nav.Link>
      <NavDropdown title="Dropdown" id="basic-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
  </Navbar.Collapse>
</Navbar>

6. Pagination

We can create pagination in react bootstrap using pagination component or button groups.

import Pagination from 'react-bootstrap/Pagination'

<Pagination>
  <Pagination.First />
  <Pagination.Prev />
  <Pagination.Item>{1}</Pagination.Item>
  <Pagination.Ellipsis />

  <Pagination.Item active>{10}</Pagination.Item>
  <Pagination.Item>{11}</Pagination.Item>
  <Pagination.Next />
  <Pagination.Last />
</Pagination>

7. Breadcrumbs

Have you seen any website without breadcrumbs? From the inception of websites to current day, they are playing the role of milestone guide. We can easily know the hierarchy of website by looking at them.

import Breadcrumb from 'react-bootstrap/Breadcrumb'

<Breadcrumb>
  <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="https://akashmittal.com/">
    Library
  </Breadcrumb.Item>
  <Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>

8. Cards

Cards are useful for websites like e-commerce where a similar kind of display is needed. They can display images as well as other components like text, buttons, links etc. React bootstrap provides many variants of cards.

import Card from 'react-bootstrap/Card'

<Row>
  <Col md={4} lg={3}>
      <Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="....." />
  <Card.Body>
    <Card.Title>Hand Bag</Card.Title>
    <Card.Text>
      A stylish bag made up of Swedish wool.
    </Card.Text>
    <Button variant="primary">Buy Now</Button>
  </Card.Body>
</Card>
  </Col>
</Row>

9. Table

Table is one of the few components which are used in a number of areas even not related to computers. Anything which have multiple properties but of same types could be listed in tables. Bootstrap provides a handy component for it.

import Table from 'react-bootstrap/Table'

<Table striped bordered hover>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colSpan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</Table>

10. Alerts

These are the small bars to display notices and errors.

import Alert from 'react-bootstrap/Alert'

<Alert variant={'primary'}>
    This is an alert!
</Alert>

These are the 10 components which are used in all the web applications. See you in next article.