• 020-800-456-747

Free in-store delivery

Bootstrap Components

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

Documentation
Components
Alert

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

import { Alert } from 'react-bootstrap'

const Component = () => {
    const [visible, setVisible] = React.useState(false)
    return (
        <Alert show={visible} onClose={() => setVisible(false)} variant="primary" className="d-flex align-items-center pe-3">
            <Icon icon="delivery-1" className="d-none d-sm-block w-3rem h-3rem svg-icon-light flex-shrink-0 me-3" />This is a primary alert—check it out! 
           
        </Alert>
    )
}

export default Component
Badge

Small count and labeling component. See the React Bootstrap 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 'react-bootstrap'

const Component = () => {
    return (
        <h2>Example heading <Badge bg="danger-light" text="danger">New</Badge></h2>
        <h3>Example heading <Badge bg="primary-light" text="primary">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 React Bootstrap documentation for more details.

Button Colors
Button Sizes
import { Button } from 'react-bootstrap'

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

export default Component
Card

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.. See the React Bootstrap 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, Button } from 'react-bootstrap'

const Component = () => {
    return (
        <Card>
            <Card.Img top src="/img/blog/christopher-campbell-28571-unsplash.jpg" alt="Card image cap" />
            <Card.Body>
                <CardTitle as="h4">Card title</CardTitle>
                <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="outline-primary">Go somewhere</Button>
            </Card.Body>
        </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 React Bootstrap documentation for more details.

Form Group
We'll never share your email with anyone else.
Input Sizes
Input Group
@
Custom Inputs
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>
    )
}
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 React Bootstrap documentation for more details.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
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>
    )
}
Progress

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

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

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

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