Bootstrap Components

The theme uses ReactStrap plugin which extends the Bootstrap framework and makes using Bootstrap in React easy. Check out docs lower on the page or visit plugin documentation here.

Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. See the ReactStrap documentation for more details.

This is a primary alert—check it out!

This is a secondary alert—check it out!

This is a success alert—check it out!

This is a danger alert—check it out!

This is a warning alert—check it out!

This is a info alert—check it out!

This is a light alert—check it out!

This is a dark alert—check it out!

import { Alert } from 'reactstrap'

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

Badge

Small count and labeling component. See the ReactStrap documentation for more details.

Example heading New

import { Badge } from 'reactstrap'

export default () => {
    return (
        <h2>Example heading <Badge color="dark">New</Badge></h2>
        <h3>Example heading <Badge color="secondary">New</Badge></h3>
    )
}

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.. See the ReactStrap documentation for more details.

import { Breadcrumb, BreadcrumbItem } from 'reactstrap'

export default () => {
    return (
        <Breadcrumb>
            <BreadcrumbItem>
                <a href="#">Home</a>
            </BreadcrumbItem>
            <BreadcrumbItem>
                <a href="#">Library</a>
            </BreadcrumbItem>
            <BreadcrumbItem active>
                Page
            </BreadcrumbItem>
        </Breadcrumb>
    )
}

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. See the ReactStrap documentation for more details.

Button Colors

Button Sizes

import { Button } from 'reactstrap'

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

Card

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. See the ReactStrap documentation for more details.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

import { Card, CardBody, CardImg, Button } from 'reactstrap'

export default () => {
    return (
        <Card>
            <CardImg top src="/content/img/photo/restaurant-1508766917616-d22f3f1eea14.jpg" alt="Card image cap" />
            <CardBody>
                <CardTitle tag="h4">Card title</CardTitle>
                <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                <Button href="#" color="primary">Go somewhere</Button>
            </CardBody>
        </Card>
    )
}

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. See the ReactStrap documentation for more details.

import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'

export default () => {
    const [dropdown, setDropdown] = React.useState(false)

    return (
        <Dropdown isOpen={dropdown} toggle={() => setDropdown(!dropdown)} direction="down" className="d-inline-block">
            <DropdownToggle color="outline-primary" className="dropdown-toggle">Default</DropdownToggle>
            <DropdownMenu>
                <DropdownItem header className="font-weight-normal">Dropdown header</DropdownItem>
                <DropdownItem href="#">Action</DropdownItem>
                <DropdownItem href="#">Another action</DropdownItem>
                <DropdownItem href="#">Something else here</DropdownItem>
                <DropdownItem divider></DropdownItem>
                <DropdownItem href="#">Something else here</DropdownItem>
            </DropdownMenu>
        </Dropdown>
    )
}

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. See the ReactStrap documentation for more details.

Form Group

Input Sizes

Input Group

Custom Inputs

import { Form, FormGroup, FormText, Label, Input } from 'reactstrap'

export default () => {
    return (
        <Form>
            <FormGroup>
                <Label for="exampleInputEmail1" className="form-label">Email address</Label>
                <Input id="exampleInputEmail1" type="email" aria-describedby="emailHelp" placeholder="Enter email" />
                <FormText id="emailHelp">We'll never share your email with anyone else.</FormText>
            </FormGroup>
        </Form>
    )
}

List Group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. See the ReactStrap documentation for more details.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

import { ListGroup, ListGroupItem } from 'reactstrap'

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

Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. See the ReactStrap documentation for more details.

import { Modal,  ModalBody, ModalFooter, Button } from 'reactstrap'

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

    const onClick = () => {
        setModal(!modal)
    }
    return (
        <>
            <Button color="primary" onClick={onClick}>Launch demo modal</Button>
            <Modal isOpen={modal} toggle={onClick} fade>
                <ModalBody>
                    <Button color="ooo" onClick={onClick} className="close"><span aria-hidden="true">×</span></Button>
                    <h2>Modal title</h2>
                    <p>Modal text</p>
                </ModalBody>
                <ModalFooter>
                    <Button color="primary" onClick={onClick}>Save changes</Button>
                    <Button color="outline-muted" onClick={onClick}>Close</Button>
                </ModalFooter>
            </Modal>
        <>
    )
}

Navbar

Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. See the ReactStrap documentation for more details.

import { Navbar, NavbarBrand, NavbarToggler, Collapse, Nav, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Container } from 'reactstrap'

export default () => {
    const [navOpen, setNavOpen] = React.useState(false)
    const [dropdownOpen, setDropdownOpen] = React.useState(false)
    
    return (
        <Navbar expand="lg" light>
            <Container fluid>
                <NavbarBrand href="/"><span>Directory  </span></NavbarBrand>
                <NavbarToggler aria-label="Toggle navigation" onClick={() => setNavOpen(!navOpen)} ><i className="fa fa-bars" /></NavbarToggler>
                <Collapse navbar isOpen={navOpen}>
                    <Nav navbar className="mr-auto">
                        <NavItem className="active">
                            <NavLink href="#">Home <span className="sr-only">(current)</span></NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink href="#">Link</NavLink>
                        </NavItem>
                        <Dropdown isOpen={dropdownOpen} toggle={() => setDropdownOpen(!dropdownOpen)} nav inNavbar>
                            <DropdownToggle caret nav>Dropdown</DropdownToggle>
                            <DropdownMenu>
                                <DropdownItem href="#">Action</DropdownItem>
                                <DropdownItem href="#">Another action</DropdownItem>
                                <DropdownItem divider />
                                <DropdownItem href="#">Something else here</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                        <NavItem>
                            <NavLink href="#" disabled>Disabled</NavLink>
                        </NavItem>
                    </Nav>
                </Collapse>
            </Container>
        </Navbar>
    )
}

Navs

Documentation and examples for how to use Bootstrap’s included navigation components. See the ReactStrap documentation for more details.

Horizontal

Vertical

Active

Link

Disabled

Tabs

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

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.

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.

import { Nav, NavItem, NavLink } from 'reactstrap'

export default () => {
    return (
        <Nav>
            <NavItem><NavLink href="#" active>Active</NavLink></NavItem>
            <NavItem><NavLink href="#">Link</NavLink></NavItem>
            <NavItem><NavLink href="#">Link</NavLink></NavItem>
            <NavItem><NavLink href="#" disabled>Disabled</NavLink></NavItem>
        </Nav>
    )
}

Pagination

Pagination to indicate a series of related content exists across multiple pages. See the ReactStrap documentation for more details.

import { Pagination, PaginationItem, PaginationLink } from 'reactstrap'

export default () => {
    return (
        <Pagination aria-label="Page navigation example">
            <PaginationItem>
                <PaginationLink href="#" aria-label="Previous">Previous</PaginationLink>
            </PaginationItem>
            <PaginationItem active>
                <PaginationLink href="#">1</PaginationLink>
            </PaginationItem>
            <PaginationItem>
                <PaginationLink href="#">2</PaginationLink>
            </PaginationItem>
            <PaginationItem>
                <PaginationLink href="#">3</PaginationLink>
            </PaginationItem>
            <PaginationItem>
                <PaginationLink href="#" aria-label="Next">Next</PaginationLink>
            </PaginationItem>
        </Pagination>
    )
}

Progress

Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. See the ReactStrap documentation for more details.

import { Progress } from 'reactstrap'

export default () => {
    return (
        <>
            <Progress value="25" color="primary"/>
            <Progress value="50" color="info"/>
            <Progress value="75" color="success"/>
            <Progress value="100" color="secondary" />
        </>
    )
}

Tooltips

Custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. See the ReactStrap documentation for more details.

import { Button, Tooltip } from 'reactstrap'

export default () => {
    const [open, setOpen] = React.useState(false)

    return (
        <>
            <Button id="Tooltip1">Tooltip on top</Button>
            <Tooltip
                placement="top"
                isOpen={open}
                target="Tooltip1"
                toggle={() => setOpen(!open)}
            >
                Tooltip on top
            </Tooltip>
        </>
    )
}