Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
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 3 components built with React
Under active development - APIs will change.
See the documentation with live editable examples.
npm install
npm test
npm run test-watch
npm run docs
. This will watch
for file changes as you work. Simply refresh the page to see the updates.npm run build
Yes please! See the contributing guidelines for details.
FAQs
Bootstrap 5 components built with React
The npm package react-bootstrap receives a total of 1,162,940 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
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.