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.
react-bootstrap-npm
Bootstrap 3 components built with React
This repo contains built CommonJS modules for Node.js.
There is a separate source repo.
A docs site with live editable examples is a work in progress.