Bootstrap Components

import { Alert } from 'react-bootstrap'

export default () => {
    return (
        <Alert variant="primary">This is a primary alert—check it out!</Alert>
        <Alert variant="secondary">This is a secondary alert—check it out!</Alert>
    )
}

Pill Badges

Light Badges

Notification Badges

import { Badge } from 'react-bootstrap'

export default () => {
    return (
        <Badge bg="primary">
            primary
        </Badge>
        <Badge
            bg="secondary-light"
            text="secondary"
            pill
        >
            secondary
        </Badge>
    )
}

import { Breadcrumb } from 'react-bootstrap'

export default () => {
    return (
        <Breadcrumb
            listProps={{ className: "ps-0 justify-content-center" }}
        >
            <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
            <Breadcrumb.Item  href="#">Library</Breadcrumb.Item>
            <Breadcrumb.Item active>Library</Breadcrumb.Item>
        </Breadcrumb>
    )
}

import { Button } from 'react-bootstrap'

export default () => {
    return (
        <>
            <Button variant="primary">Primary</Button>
            <Button variant="secondary">Secondary</Button>
        </>
    )
}

import { Card, Button } from 'react-bootstrap'

export default () => {
    return (
      <Card>
        <Card.Img
          variant="top"
          src="/content/img/photo/restaurant-1508766917616-d22f3f1eea14.jpg"
          alt="Card image cap"
        />
        <Card.Body>
          <Card.Title as="h4">Card title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and make up
            the bulk of the card's content.
          </Card.Text>
          <Button href="#">Go somewhere</Button>
        </Card.Body>
      </Card>
    )
}

import { Dropdown } from 'react-bootstrap'

export default () => {
    return (
      <Dropdown drop="down" className="d-inline-block">
        <Dropdown.Toggle variant="outline-primary">Default</Dropdown.Toggle>
          <Dropdown.Menu>
            <Dropdown.Header className="fw-normal">
              Dropdown header
            </Dropdown.Header>
            <Dropdown.Item href="#">Action</Dropdown.Item>
            <Dropdown.Item href="#">Another action</Dropdown.Item>
            <Dropdown.Item href="#">Something else here</Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item href="#">Something else here</Dropdown.Item>
          </Dropdown.Menu>
      </Dropdown>
    )
}

import { Form } from 'react-bootstrap'

export default () => {
    return (
        <Form>
            <div className="mb-4>
                <Form.Label htmlFor="exampleInputEmail1">Email address</Form.Label>
                <Form.Control id="exampleInputEmail1" type="email" aria-describedby="emailHelp" placeholder="Enter email" />
                <Form.Text id="emailHelp">We'll never share your email with anyone else.</Form.Text>
            </div>
        </Form>
    )
}

import { ListGroup } from 'react-bootstrap'

export default () => {
    return (
        <ListGroup>
            <ListGroup.Item>Cras justo odio</ListGroup.Item>
            <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
            <ListGroup.Item>Morbi leo risus</ListGroup.Item>
            <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
            <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
        </ListGroup>
    )
}

import { Modal, Button } from 'react-bootstrap'

export default () => {
    const [modal, setModal] = React.useState(false)

    const onClick = () => {
        setModal(!modal)
    }
    return (
        <>
            <Button onClick={onClick}>Launch demo modal</Button>
            <Modal show={modal} onHide={onClick}>
                <Modal.Header closeButton>
                    <Modal.Title className="text-uppercase" as="h6">
                    Modal heading
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p className="text-muted">
                    <strong>Pellentesque habitant morbi tristique</strong> senectus et
                    netus et malesuada fames ac turpis egestas. Vestibulum tortor
                    quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec
                    eu libero sit amet quam egestas semper.{" "}
                    <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend
                    leo. Quisque sit amet est et sapien ullamcorper pharetra.
                    Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>,
                    ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt
                    condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
                    dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis.
                    Ut felis.
                    </p>
                </Modal.Body>
                <Modal.Footer className="justify-content-end">
                    <Button onClick={onClick}>Save changes</Button>
                    <Button variant="outline-muted" onClick={onClick}>
                    Close
                    </Button>
                </Modal.Footer>
            </Modal>
        <>
    )
}

import React, { useState } from 'react'
import {
  Navbar,
  Nav,
  Container,
  Button,
  Form,
  Dropdown,
  NavItem,
  NavLink
} from "react-bootstrap"

export default () => {
    const [dropdown1, setDropdown1] = useState(false)
    
    return (
      <Navbar expand="lg" variant="light" className="shadow mb-3">
        <Container fluid>
          <Navbar.Brand href="/" className="text-uppercase fw-bold">
            <span>Directory</span>
          </Navbar.Brand>
          <Navbar.Toggle aria-label="Toggle navigation">
            <FontAwesomeIcon icon={faBars} />
          </Navbar.Toggle>
          <Navbar.Collapse>
            <Nav className="me-auto">
              <Nav.Item className="active">
                <Nav.Link href="#">
                  Home <span className="sr-only">(current)</span>
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link href="#">Link</Nav.Link>
              </Nav.Item>
              <Dropdown
                  as={NavItem}
                  onToggle={() => setDropdown(!dropdown)}
                >
                  <Dropdown.Toggle as={NavLink}>Dropdown</Dropdown.Toggle>
                  <Dropdown.Menu className={!dropdown ? "hide" : ""}>
                    <Dropdown.Item href="#">Action</Dropdown.Item>
                    <Dropdown.Item href="#">Another action</Dropdown.Item>
                    <Dropdown.Divider />
                    <Dropdown.Item href="#">Something else here</Dropdown.Item>
                  </Dropdown.Menu>
                </Dropdown>
              <Nav.Item>
                <Nav.Link href="#" disabled>
                  Disabled
                </Nav.Link>
              </Nav.Item>
            </Nav>
            <Form className="my-2 my-lg-0 d-sm-flex">
              <Form.Control
                type="search"
                placeholder="Search"
                aria-label="Search"
                className="me-sm-2"
              />
              <Button
                type="submit"
                variant="outline-primary"
                className="my-2 my-sm-0"
              >
                Search
              </Button>
            </Form>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    )
}

import { Nav, Tab } from 'react-bootstrap'

export default () => {
    return (
        <Tab.Container defaultActiveKey="first">
            <Nav variant="tabs">
                <Nav.Item>
                    <Nav.Link eventKey="first">Tab One</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="second">Tab Two</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="third">Tab Three</Nav.Link>
                </Nav.Item>
            </Nav>
            <Tab.Content activeTab={tab} className="py-5 px-3">
                <Tab.Pane eventKey="first">
                    <p className="text-muted">
                        One morning, when Gregor Samsa woke from troubled dreams, he
                        found himself transformed in his bed into a horrible vermin.
                        He lay on his armour-like back, and if he lifted his head a
                        little he could see his brown belly, slightly domed and
                        divided by arches into stiff sections
                    </p>
                </Tab.Pane>
                <Tab.Pane eventKey="second">
                    <p className="text-muted">
                        The bedding was hardly able to cover it and seemed ready to
                        slide off any moment. His many legs, pitifully thin compared
                        with the size of the rest of him, waved about helplessly as
                        he looked. "What's happened to me?" he thought. It wasn't a
                        dream.
                    </p>
                </Tab.Pane>
                <Tab.Pane eventKey="third">
                    <p className="text-muted">
                        His room, a proper human room although a little too small,
                        lay peacefully between its four familiar walls. A collection
                        of textile samples lay spread out on the table.
                    </p>
                </Tab.Pane>
            </Tab.Content>
        </Tab.Container>
    )
}

• PreviousFirst
• 1(current)
• 2
• 3
• 4
• 5
• NextNext

import { Pagination } from 'react-bootstrap'

export default () => {
    return (
        <Pagination aria-label="Page navigation example">
            <Pagination.First href="#">Previous</Pagination.First>
            <Pagination.Item active href="#">
            1
            </Pagination.Item>
            <Pagination.Item href="#">2</Pagination.Item>
            <Pagination.Item href="#">3</Pagination.Item>
            <Pagination.Item href="#">4</Pagination.Item>
            <Pagination.Item href="#">5</Pagination.Item>
            <Pagination.Next href="#">Next</Pagination.Next>
        </Pagination>
    )
}

import { ProgressBar } from 'react-bootstrap'

export default () => {
    return (
        <>
            <ProgressBar now={25} variant="primary" />
            <ProgressBar now={50} variant="info" />
            <ProgressBar now={75} variant="success" />
            <ProgressBar now={100} variant="secondary" />
        </>
    )
}

import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap'

export default () => {
    return (
        <>
            {["top", "right", "bottom", "left"].map((placement) => (
                <OverlayTrigger
                    key={placement}
                    placement={placement}
                    overlay={
                        <Tooltip id={`tooltip-${placement}`}>
                            Tooltip on <strong>{placement}</strong>.
                        </Tooltip>
                    }
                >
                    <Button variant="outline-primary" className="mb-1 me-1">
                        Tooltip on {placement}
                    </Button>
                </OverlayTrigger>
            ))}
        </>
    )
}