• 020-800-456-747

Free in-store delivery

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.

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

Example heading New

Example heading New

Example heading New
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

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 image cap

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 image

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

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
We'll never share your email with anyone else.
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

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