Bootstrap Components

import { Alert } from 'react-bootstrap'

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

export default Component

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'

const Component = () => {
    return (
        <Card>
            <Card.Img top src="/img/photo/ian-dooley-347962-unsplash.jpg" alt="Card image cap" />
            <Card.Body>
                <Card.Title tag="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="#" variant="dark">Go somewhere</Button>
            </Card.Body>
        </Card>
    )
}

export default Component

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 className="text-center">
                <Modal.Title className="w-100" as="h2">
                  Modal heading
                </Modal.Title>
                <Button
                  variant="dark"
                  className="close modal-close p-0"
                  onClick={onClick}
                >
                  <Icon
                    icon="close-1"
                    className="w-100 h-100 svg-icon-light align-middle"
                  />
                </Button>
              </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-center">
                <Button variant="outline-dark" onClick={onClick}>
                  Close
                </Button>
                <Button onClick={onClick} variant="dark">
                  Save changes
                </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
• 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="gray-600" />
            <ProgressBar now={100} variant="dark" />
        </>
    )
}

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>
            ))}
        </>
    )
}