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 3 components built with React.

Under active development - APIs will change. Check out the 1.0.0 roadmap and contributing guidelines to see where you can help out. Prior to the 1.0.0 release, deprecations or breaking changes will result in a minor version bump.

Docs

See the documentation with live editable examples.

Related modules

• react-router-bootstrap – Integration with React Router
• React Bootstrap Extended - A version of React Bootstrap where each component has extra props that map to bootstrap's utility classes. For example, pullRight adds the class pull-right to a component.
• Awesome React Bootstrap Components - Additional components like off-canvas navbar, switch and sliders.

Local setup

Yarn is the 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

Contributions

Yes please! See the contributing guidelines for details.