Bootstrap Components

Theme uses ReactStrap plugin which extends 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'

const Component = () => {
    const [visible, setVisible] = React.useState(false)
    return (
        <Alert isOpen={visible} color="primary" className="d-flex align-items-center pr-3">
            <Icon icon="delivery-1" className="d-none d-sm-block w-3rem h-3rem svg-icon-light flex-shrink-0 mr-3" />This is a primary alert—check it out! 
            <button 
                className="close close-absolute close-centered opacity-10 text-inherit" 
                onClick={() => setVisible(false)} 
                type="button" 
                aria-label="Close"
            >
                <Icon icon="close-1" className="w-2rem h-2rem" />
            </button>
        </Alert>
    )
}

export default Component

Badge

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

Add -light suffix to the class name to get lighter tones on badges.

Example heading New

import { Badge } from 'reactstrap'

const Component = () => {
    return (
        <h2>Example heading <Badge color="danger-light">New</Badge></h2>
        <h3>Example heading <Badge color="primary-light">New</Badge></h3>
    )
}

export default Component

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'

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

export default Component

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'

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

export default Component

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'

const Component = () => {
    return (
        <Card>
            <CardImg top src="/img/blog/christopher-campbell-28571-unsplash.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="outline-primary">Go somewhere</Button>
            </CardBody>
        </Card>
    )
}

export default Component

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'

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

    return (
        <Dropdown isOpen={dropdown} toggle={() => setDropdown(!dropdown)} direction="down" className="d-inline-block">
            <DropdownToggle color="outline-dark" caret>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>
    )
}

export default Component

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'

const Component = () => {
    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>
    )
}

export default Component

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'

const Component = () => {
    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>
    )
}

export default Component

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'

const Component = () => {
    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>
        <>
    )
}

export default Component

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'

const Component = () => {
    const [navOpen, setNavOpen] = React.useState(false)
    const [dropdownOpen, setDropdownOpen] = React.useState(false)
    
    return (
        <Navbar expand="lg" light>
            <Container fluid>
                <NavbarBrand href="/">Varkala</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>
    )
}

export default Component

Navs

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

Horizontal

Vertical

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'

const Component = () => {
    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>
    )
}

export default Component

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'

const Component = () => {
    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="#">4</PaginationLink>
            </PaginationItem>
            <PaginationItem>
                <PaginationLink href="#" aria-label="Next">Next</PaginationLink>
            </PaginationItem>
        </Pagination>
    )
}

export default Component

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'

const Component = () => {
    return (
        <>
            <Progress value="25" color="primary"/>
            <Progress value="50" color="info"/>
            <Progress value="75" color="gray-600"/>
            <Progress value="100" color="dark" />
        </>
    )
}

export default Component

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'

const Component = () => {
    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>
        </>
    )
}

export default Component

Bootstrap Components

Documentation

Components

Alert

Badge

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Buttons

Button Colors

Button Sizes

Card

Card title

Card title

Dropdowns

Forms

Form Group

Input Sizes

Input Group

Custom Inputs

List Group

Navbar

Navs

Horizontal

Vertical

Tabs

Progress

Tooltips

Shop

Company

Your account