react-bootstrap
Advanced tools
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.
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>
);
}"}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, 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, 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.
Bootstrap 5 components built with React.
React-Bootstrap is compatible with various versions of Bootstrap. As such, you need to ensure you are using the correct combination of versions.
See the below table on which version of React-Bootstrap you should be using in your project.
| Bootstrap Version | React-Bootstrap Version | Documentation |
|---|---|---|
| v5.x | 2.x | Link |
| v4.x | 1.x (not maintained) | Link |
| v3.x | 0.33.x (not maintained) | Link |
If you would like to update React-Bootstrap within an existing project to use Bootstrap 5, please read our docs for migrating to React-Bootstrap V2.
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.
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:
yarn test (Or run them in watch mode with yarn run tdd).yarn startyarn run buildClick 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.
Yes please! See the contributing guidelines for details.
FAQs
Bootstrap 5 components built with React
The npm package react-bootstrap receives a total of 933,834 weekly downloads. As such, react-bootstrap popularity was classified as popular.
We found that react-bootstrap demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.