react-bootstrap

What is react-bootstrap?

The react-bootstrap npm package is a library of reusable front-end components that are built with React and Bootstrap. It allows developers to use Bootstrap components as React components, which can be easily integrated into React applications. This package provides a consistent framework for building responsive and accessible web interfaces.

What are react-bootstrap's main functionalities?

Layout

React-bootstrap provides a grid system for creating layouts using Container, Row, and Col components, which are based on Bootstrap's grid system.

{"import { Container, Row, Col } from 'react-bootstrap';
<Container>
  <Row>
    <Col>1 of 2</Col>
    <Col>2 of 2</Col>
  </Row>
</Container>"}

Navigation

React-bootstrap provides components for building navigation bars, including responsive navbars that can collapse at certain breakpoints.

{"import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
<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>"}

Forms

React-bootstrap provides form components that include various types of inputs, labels, and buttons, making it easy to build and style forms.

{"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.Text className='text-muted'>
      We'll never share your email with anyone else.
    </Form.Text>
  </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>"}

Modals

React-bootstrap provides a Modal component that can be used to create dialog prompts and pop-ups, which are customizable and can be controlled programmatically.

{"import { Modal, Button } from 'react-bootstrap';
function MyModal(props) {
  return (
    <Modal {...props} size='lg' aria-labelledby='contained-modal-title-vcenter' centered>
      <Modal.Header closeButton>
        <Modal.Title id='contained-modal-title-vcenter'>
          Modal heading
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <p>This is a modal body.</p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}"}

Other packages similar to react-bootstrap

reactstrap

reactstrap is another library of React components that are built with Bootstrap. It is similar to react-bootstrap but is specifically built for Bootstrap 4, whereas react-bootstrap has also started supporting Bootstrap 5.

ant-design

ant-design, also known as Ant Design, is a design system and React UI library that offers a suite of high-quality components and demos for building rich, interactive user interfaces. It is an alternative to react-bootstrap with a different design language and a larger set of components.

material-ui

material-ui, now known as MUI, provides a set of React components that implement Google's Material Design. It is an alternative to react-bootstrap with a focus on Material Design principles, offering a different look and feel as well as a comprehensive component library.

README

React-Bootstrap

Bootstrap 5 components built with React.

Docs

See the documentation with live editable examples and API documentation.

To find the documentation for the latest Bootstrap 4 compatible release, go here and for Bootstrap 3 go here.

Migrating from Bootstrap 3 to Bootstrap 4

If you would like to update React-Bootstrap within an existing project to use Bootstrap 4, please read our docs for migrating to React-Bootstrap V1.

Related modules

• react-router-bootstrap – Integration with React Router
• Awesome React Bootstrap Components - Additional components like off-canvas navbar, switch and sliders.

Local setup

Yarn is our package manager of choice here. Check out setup instructions here if you don't have it installed already. After that you can run yarn run bootstrap to install all the needed dependencies.

From there you can:

• Run the tests once with yarn test (Or run them in watch mode with yarn run tdd).
• Start a local copy of the docs site with yarn start
• Or build a local copy of the library with yarn run build

CodeSandbox Examples

Click here to explore some React-Bootstrap CodeSandbox examples.

Click here to automatically open CodeSandbox with the React-Bootstrap CodeSandbox Examples GitHub Repository as a workspace.

Contributions

Yes please! See the contributing guidelines for details.

Changelog

2.0.0-alpha.2 (2021-05-17)

Bug Fixes

• Dropdown: fix html structure when inside InputGroup (#5713) (d4b086a)
• Offcanvas: fix backdrop class (#5821) (309f881)

Features

• DropdownMenu: add custom variant support (#5807) (8c7857a)

• v5: Add floating labels (#5567) (6802774)

• v5: update ResponsiveEmbed to Ratio (#5714) (91470c2)

• refactor(Dropdown)!: simplify menu alignment API (#5759) (8a7e095), closes #5759

BREAKING CHANGES

• removes alignRight and menuAlign props in favor of align