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

Contributors

• Huge contributions from syllog1sm (blog)
• Pieter Vanderwerff

Getting started

You can import the lib with as AMD modules, CommonJS modules as a global JS script.

First add the bootstrap CSS to your project then

AMD

bower install react-bootstrap

var Alert = require('react-bootstrap/amd/Alert');
// or
var Alert = require('react-bootstrap/amd').Alert;

CommonJS

npm install react react-bootstrap

var Alert = require('react-bootstrap/cjs/Alert');
// or
var Alert = require('react-bootstrap').Alert;

Browser globals

<script src="http://fb.me/react-0.8.0.js"></script>
<script src="react-bootstrap/dist/react-bootstrap.min.js"></script>
<script>
    var Alert = ReactBootstrap.Alert;
</script>

Currently implemented (but under active development)

• Nav, NavItem
• Button
• DropdownButton
• MenuItem
• TabbedArea, TabPane, Tab
• CollapsePanel
• Alert
• SplitButton

Nav

var Nav     = require('react-bootstrap/cjs/Nav');
var NavItem = require('react-bootstrap/cjs/NavItem');

var key = 1;

function handleSelect (selectedKey) {
  key = selectedKey;
}

<Nav bsStyle="[tabs|pills]" bsVariation="[stacked|justified]" activeKey={key} onSelect={handleSelect}>
  <NavItem key={1} href="/home">NavItem 1 content</NavItem>
  <NavItem key={2} title="Item">NavItem 2 content</NavItem>
  <NavItem key={3} disabled={true}>NavItem 3 content</NavItem>
</Nav>

Button

var Button = require('react-bootstrap/cjs/Button');

<Button onClick={handleClick}>Title</Button>

DropdownButton

var DropdownButton = require('react-bootstrap/cjs/DropdownButton');
var MenuItem       = require('react-bootstrap/cjs/MenuItem');

function handleSelect (selectedIndex) {
}

<DropdownButton title="Title" onSelect={handleSelect}>
  <MenuItem key="1">MenuItem 1 content</MenuItem>
  <MenuItem key="2">MenuItem 2 content</MenuItem>
</DropdownButton>

Tabs

Controlled

var TabbedArea = require('react-bootstrap/cjs/TabbedArea');
var TabPane    = require('react-bootstrap/cjs/TabPane');

var key = 1;

function handleSelect (selectedKey) {
  key = selectedKey;
}

<TabbedArea title="Title" activeKey={key} onSelect={handleSelect}>
  <TabPane tab="Tab 1" key={1}>TabPane 1 content</TabPane>
  <TabPane tab={<strong>Tab 2</strong>} key={2}>TabPane 2 content</TabPane>
</TabbedArea>

Uncontrolled

var TabbedArea = require('react-bootstrap/cjs/TabbedArea');
var TabPane    = require('react-bootstrap/cjs/TabPane');

<TabbedArea title="Title" initialActiveKey={1}>
  <TabPane tab="Tab 1" key={1}>TabPane 1 content</TabPane>
  <TabPane tab={<strong>Tab 2</strong>} key={2}>TabPane 2 content</TabPane>
</TabbedArea>

Alert

var Alert = require('react-bootstrap/cjs/Alert');

function handleDismiss () {
}

<Alert bsStyle="danger" onDismiss={handleDismiss} dismissAfter={5000}>
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</Alert>

CollapsePanel

var CollapsePanel = require('react-bootstrap/cjs/CollapsePanel')

TODO docs

MenuItem

var MenuItem = require('react-bootstrap/cjs/MenuItem');

function handleSelect (key) {
}

<MenuItem key={1} bsVariation="[divider|header]" onSelect={handleSelect}>Content</MenuItem>

Up next

• Label
• Accordion
• Pagination, Pager
• Modal