react-bootstrap

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>
  );
}"}