Hope UIPro - Design System

Production ready FREE Open Source Dashboard UI Kit and Design System.

Hope UI

Components

Accordion
Documentation

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
<div className="bd-example">
<Accordion defaultActiveKey="0">
    <Accordion.Item eventKey="0">
        <Accordion.Header>Accordion Item #1</Accordion.Header>
        <Accordion.Body>
        <strong>This is the first item's accordion body.<strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
        </Accordion.Body>
    </Accordion.Item>
    <Accordion.Item eventKey="1">
        <Accordion.Header>Accordion Item #2</Accordion.Header>
        <Accordion.Body>
        <strong>This is the second item's accordion body.<strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
        </Accordion.Body>
    </Accordion.Item>
    <Accordion.Item eventKey="2">
        <Accordion.Header>Accordion Item #3</Accordion.Header>
        <Accordion.Body>
        <strong>This is the third item's accordion body.<strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
        </Accordion.Body>
    </Accordion.Item>
    </Accordion>
    <Accordion defaultActiveKey="0" className="custom-accordion">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
                <Accordion.Body>
                    <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It&#39;s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
                <Accordion.Body>
                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It&#39;s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
                <Accordion.Body>
                    <strong>This is the third item&#39;s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It&#39;s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                </Accordion.Body>
        </Accordion.Item>
    </Accordion>
</div>
Alerts
Documentation
 <div className="bd-example">                
    <Alert variant="primary alert-solid  alert-dismissible fade show" role="alert" show={showA1} onClose={() => setShowA1(false)} dismissible>
        A simple primary alert with <Link href="#" className="alert-link">an example link</Link>. Give it a click if you like.
        <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close" onClick={() => setShowA1(false)}></button>
    </Alert>
</div>
<div className="bd-example">                
    <Alert variant="primary alert-dismissible fade show" role="alert" show={showA2} onClose={() => setShowA2(false)} dismissible>
        A simple primary alert with <Link href="#" className="alert-link">an example link</Link>. Give it a click if you like.
        <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close" onClick={() => setShowA2(false)}></button>
    </Alert>
</div>
<div className="bd-example">
    <svg xmlns="http://www.w3.org/2000/svg" style={{display: "none"}}>
        <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
        </symbol>
        <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
        </symbol>
        <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
        </symbol>
    </svg>
    <Alert variant="primary d-flex align-items-center" role="alert">
        <svg className="me-2" id="info-fill" fill="currentColor" width="20" viewBox="0 0 16 16">
            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
        </svg>
        <div>
            An example alert with an icon
        </div>
    </Alert>
    <Alert variant="success d-flex align-items-center" role="alert">
        
        <svg className="me-2" id="check-circle-fill" width="20" fill="currentColor" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
        </svg>
        <div>
            An example success alert with an icon
        </div>
    </Alert>
    <Alert variant="warning d-flex align-items-center" role="alert">
        <svg className="me-2" id="exclamation-triangle-fill" fill="currentColor" width="20" viewBox="0 0 16 16">
            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
        </svg>
        <div>
            An example warning alert with an icon
        </div>
    </Alert>
    <Alert variant="danger d-flex align-items-center" role="alert">
        <svg className="me-2" id="exclamation-triangle-fill" fill="currentColor" width="20" viewBox="0 0 16 16">
            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
        </svg>
        <div>
            An example danger alert with an icon
        </div>
    </Alert>
</div>
<div className="bd-example">
    <Alert variant="success alert-left alert-dismissible fade show mb-3" closeVariant='white' role="alert" show={showA3} onClose={() => setShowA3(false)} dismissible>
        <span> This is a success alert—check it out!</span>
    </Alert>
    <Alert variant="info lert-top alert-dismissible fade show mb-3" closeVariant='white' role="alert" show={showA4} onClose={() => setShowA4(false)} dismissible>
        <span> This is a info alert—check it out!</span>
    </Alert>
    <Alert variant="warning right alert-dismissible fade show mb-3" closeVariant='white' role="alert" show={showA5} onClose={() => setShowA5(false)} dismissible>
        <span> This is a warning alert—check it out!</span>
    </Alert>
    <Alert variant="danger bottom alert-dismissible fade show" closeVariant='white' role="alert" show={showA6} onClose={() => setShowA6(false)} dismissible>
        <span> This is a danger alert—check it out!</span>
    </Alert>
</div>
<div className="bd-example">
    <Alert variant="warning rounded-0 alert-dismissible fade show " role="alert" show={showA7} onClose={() => setShowA7(false)} dismissible>
        <span> This is a warning alert—check it out!</span>
    </Alert>

    <Alert variant="warning alert-solid rounded-0 alert-dismissible fade show " closeVariant='white' role="alert" show={showA8} onClose={() => setShowA8(false)} dismissible>
        <span> This is a warning alert—check it out!</span>
    </Alert>
</div>
<div className="bd-example">
    <Alert variant="success mb-0" role="alert">
        <h4 className="alert-heading">Well done!</h4>
        <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
        <hr/>
        <p className="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </Alert>
</div>
Badge
Documentation

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Warning Danger
Primary Secondary Success Warning Danger 

 <div className="bd-example">
 <h1>Example heading <Badge bg="primary">New</Badge></h1>
 <h2>Example heading <Badge bg="secondary">New</Badge></h2>
 <h3>Example heading <Badge bg="success">New</Badge></h3>
 <h4>Example heading <Badge bg="danger">New</Badge></h4>
 <h5>Example heading <Badge bg="warning">New</Badge></h5>
 <h6>Example heading <Badge bg="info">New</Badge></h6>
</div>

<div className="bd-example">
    <Row>
        <Col sm="4">
        <Button variant="primary">
            Notifications <Badge bg="secondary">9</Badge>
            <span className="visually-hidden">unread messages</span>
        </Button>
        </Col>
        <Col sm="3">
            <Button variant="primary position-relative mt-2 mt-sm-0">
                Inbox
                <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger ">
                    99+
                <span className="visually-hidden">unread messages</span>
                </span>
            </Button>
        </Col>
        <Col sm="3">
            <Button type="button" variant="primary position-relative mt-2 mt-sm-0">
                Profile
                <span className="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle ">
                <span className="visually-hidden">New alerts</span>
                </span>
            </Button>
        </Col>
    </Row>
</div>

<div className="bd-example">

 <Badge pill bg="primary">Primary</Badge>
 <Badge pill bg="secondary">Secondary</Badge>
 <Badge pill bg="success">Success</Badge>
 <Badge pill bg="danger">Danger</Badge>
 <Badge pill bg="warning">Warning</Badge>
 <Badge pill bg="info">Info</Badge>
 <Badge pill bg="light text-dark">Light</Badge>
 <Badge pill bg="dark">Dark</Badge>
</div>    

<div className="bd-example">
    <span  className="bg-primary-subtle rounded-pill iq-custom-badge">
        Primary
        <Button variant="primary btn-sm rounded-pill iq-cancel-btn">
            <svg className="icon-14" width="14" height="14" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </Button>
    </span>
    <span className="bg-soft-secondary rounded-pill iq-custom-badge">
        Secondary
        <Button variant="secondary btn-sm rounded-pill iq-cancel-btn">
            <svg className="icon-14" width="14" height="14" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </Button>
    </span>
    <span className="bg-soft-success rounded-pill iq-custom-badge mt-1 mt-sm-0">
        Success
        <Button variant="success btn-sm rounded-pill iq-cancel-btn">
            <svg className="icon-14" width="14" height="14" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </Button>
    </span>
    <span className="bg-soft-warning rounded-pill iq-custom-badge mt-1 mt-sm-0">
        Warning
        <Button variant="warning btn-sm rounded-pill iq-cancel-btn">
            <svg className="icon-14" width="14" height="14" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </Button>
    </span>
    <span className="bg-soft-danger rounded-pill iq-custom-badge mt-1 mt-sm-0">
        Danger
        <Button variant="danger btn-sm rounded-pill iq-cancel-btn">
            <svg className="icon-14" width="14" height="14" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </Button>
    </span>
</div>
Button
Documentation
<div className="bd-example">
    <Button variant="primary">Default</Button>{' '}
    <Button variant="primary rounded-pill">Rounded</Button>{' '}
    <Button variant="primary rounded-pill ">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        With Icon
    </Button>{' '}
    <Button variant="icon btn-primary">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>
</div>
<div className="bd-example">                
    <Button type="button" variant="primary">Primary</Button>{' '}
    <Button type="button" variant="secondary">Secondary</Button>{' '}
    <Button type="button" variant="success">Success</Button>{' '}
    <Button type="button" variant="danger">Danger</Button>{' '}
    <Button type="button" variant="warning">Warning</Button>{' '}
    <Button type="button" variant="info">Info</Button>{' '}
    <Button type="button" variant="light">Light</Button>{' '}
    <Button type="button" variant="dark">Dark</Button>{' '}
    <Button type="button" variant="link">Link</Button>
</div>
<div className="bd-example">                
    <Button type="button" variant="outline-primary">Primary</Button>{' '}
    <Button type="button" variant="outline-secondary">Secondary</Button>{' '}
    <Button type="button" variant="outline-success">Success</Button>{' '}
    <Button type="button" variant="outline-danger">Danger</Button>{' '}
    <Button type="button" variant="outline-warning">Warning</Button>{' '}
    <Button type="button" variant="outline-info">Info</Button>{' '}
    <Button type="button" variant="outline-light">Light</Button>{' '}
    <Button type="button" variant="outline-dark">Dark</Button>
</div>
<div className="bd-example">
    <Button type="button" variant="soft-primary">Primary</Button>{' '}
    <Button type="button" variant="soft-secondary">Secondary</Button>{' '}
    <Button type="button" variant="soft-success">Success</Button>{' '}
    <Button type="button" variant="soft-danger">Danger</Button>{' '}
    <Button type="button" variant="soft-warning">Warning</Button>{' '}
    <Button type="button" variant="soft-info">Info</Button>{' '}
    <Button type="button" variant="soft-light">Light</Button>{' '}
    <Button type="button" variant="soft-dark">Dark</Button>
</div>
<div className="bd-example">
    <Button variant="primary">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Primary
    </Button>{' '} 
    <Button variant="secondary">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Secondary
    </Button>{' '} 
    <Button variant="success">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Success
    </Button>{' '}
    <Button variant="danger">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Danger
    </Button>{' '}
    <Button variant="warning">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Warning
    </Button>{' '}
    <Button variant="info">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Info
    </Button>{' '}
    <Button variant="light">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Light
    </Button>{' '}
    <Button variant="dark">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Dark
    </Button>
</div>
<div className="bd-example">
    <Button type="button" variant="outline-primary">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Primary
    </Button>{' '}
    <Button type="button" variant="outline-secondary">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Secondary
    </Button>{' '}
    <Button type="button" variant="outline-success">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Success
    </Button>{' '}
    <Button type="button" variant="outline-danger">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Danger
    </Button>{' '}
    <Button type="button" variant="outline-warning">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Warning
    </Button>{' '}
        <Button type="button" variant="outline-info">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Info
    </Button>{' '}
    <Button type="button" variant="outline-light">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Light
    </Button>{' '}
    <Button type="button" variant="outline-dark">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Dark
    </Button>
</div>
<div className="bd-example">
    <Button type="button" variant="soft-primary">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Primary
    </Button>{' '}
    <Button type="button" variant="soft-secondary">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Secondary
    </Button>{' '}
    <Button type="button" variant="soft-success">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Success
    </Button>{' '}
    <Button type="button" variant="soft-danger">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Danger
    </Button>{' '}
    <Button type="button" variant="soft-warning">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Warning
    </Button>{' '}
    <Button type="button" variant="soft-info">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Info
    </Button>{' '}
    <Button type="button" variant="soft-light">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Light
    </Button>{' '}
    <Button type="button" variant="soft-dark">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Dark
    </Button>{' '}
</div>
<div className="bd-example">
    <Button variant="primary btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="secondary btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="success btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="danger btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="warning btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="info btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="light btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="dark btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>
</div>
<div className="bd-example">
    <Button variant="outline-primary btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-secondary btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-success btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-danger btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-warning btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-info btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-light btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-dark btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
</div>
<div className="bd-example">
    <Button variant="soft-primary btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-secondary btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-success btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-danger btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-warning btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-info btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-light btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-dark btn-icon">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
</div>
<div className="bd-example">
    <Button type="button" variant="primary rounded-pill">Primary</Button>{' '}
    <Button type="button" variant="secondary rounded-pill">Secondary</Button>{' '}
    <Button type="button" variant="success rounded-pill">Success</Button>{' '}
    <Button type="button" variant="danger rounded-pill">Danger</Button>{' '}
    <Button type="button" variant="warning rounded-pill">Warning</Button>{' '}
    <Button type="button" variant="info rounded-pill">Info</Button>{' '}
    <Button type="button" variant="light rounded-pill">Light</Button>{' '}
    <Button type="button" variant="dark rounded-pill">Dark</Button>{' '}
    <Button type="button" variant="link rounded-pill">Link</Button>
</div>
<div className="bd-example">
    <Button type="button" variant="outline-primary rounded-pill">Primary</Button>{' '}
    <Button type="button" variant="outline-secondary rounded-pill">Secondary</Button>{' '}
    <Button type="button" variant="outline-success rounded-pill">Success</Button>{' '}
    <Button type="button" variant="outline-danger rounded-pill">Danger</Button>{' '}
    <Button type="button" variant="outline-warning rounded-pill">Warning</Button>{' '}
    <Button type="button" variant="outline-info rounded-pill">Info</Button>{' '}
    <Button type="button" variant="outline-light rounded-pill">Light</Button>{' '}
    <Button type="button" variant="outline-dark rounded-pill">Dark</Button>
</div>
<div className="bd-example">
    <Button type="button" variant="soft-primary rounded-pill">Primary</Button>{' '}
    <Button type="button" variant="soft-secondary rounded-pill">Secondary</Button>{' '}
    <Button type="button" variant="soft-success rounded-pill">Success</Button>{' '}
    <Button type="button" variant="soft-danger rounded-pill">Danger</Button>{' '}
    <Button type="button" variant="soft-warning rounded-pill">Warning</Button>{' '}
    <Button type="button" variant="soft-info rounded-pill">Info</Button>{' '}
    <Button type="button" variant="soft-light rounded-pill">Light</Button>{' '}
    <Button type="button" variant="soft-dark rounded-pill">Dark</Button>
</div>
<div className="bd-example">
    <Button variant="primary rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Primary
    </Button>{' '}
    <Button variant="secondary rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Secondary
    </Button>{' '}
    <Button variant="success rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Success
    </Button>{' '}
    <Button variant="danger rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Danger
    </Button>{' '}
    <Button variant="warning rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Warning
    </Button>{' '}
    <Button variant="info rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Info
    </Button>{' '}
    <Button variant="light rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Light
    </Button>{' '}
    <Button variant="dark rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Dark
    </Button>
</div>
<div className="bd-example">
    <Button variant="outline-primary rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Primary
    </Button>{' '}
    <Button variant="outline-secondary rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Secondary
    </Button>{' '}
    <Button variant="outline-success rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Success
    </Button>{' '}
    <Button variant="outline-danger rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Danger
    </Button>{' '}
    <Button variant="outline-warning rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Warning
    </Button>{' '}
    <Button variant="outline-info rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Info
    </Button>{' '}
    <Button variant="outline-light rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Light
    </Button>{' '}
    <Button variant="outline-dark rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Dark
    </Button>
</div>
<div className="bd-example">
    <Button variant="soft-primary rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Primary
    </Button>{' '}
    <Button variant="soft-secondary rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Secondary
    </Button>{' '}
    <Button variant="soft-success rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Success
    </Button>{' '}
    <Button variant="soft-danger rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Danger
    </Button>{' '}
    <Button variant="soft-warning rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Warning
    </Button>{' '}
    <Button variant="soft-info rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Info
    </Button>{' '}
    <Button variant="soft-light rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Light
    </Button>{' '}
    <Button variant="soft-dark rounded-pill">
        <span className="btn-inner me-1">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
        Dark
    </Button>
</div>
<div className="bd-example">
    <Button variant="primary btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="secondary btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="success btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="danger btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="warning btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="info btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="light btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="dark btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>
</div>
<div className="bd-example">
    <Button variant="outline-primary btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-secondary btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-success btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-danger btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-warning btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-info btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-light btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="outline-dark btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>
</div>
<div className="bd-example">
    <Button variant="soft-primary btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-secondary btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-success btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-danger btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-warning btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-info btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-light btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>{' '}
    <Button variant="soft-dark btn-icon  rounded-pill">
        <span className="btn-inner">
            <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                </path>
            </svg>
        </span>
    </Button>
</div>
<div className="bd-example">
    <Button type="button" variant="primary " size="xs">Ex small</Button>{' '}
    <Button type="button" variant="primary" size="sm">Small button</Button>{' '}
    <Button type="button" variant="primary">Default button</Button>{' '}
    <Button type="button" variant="primary" size="lg">Large button</Button>
</div>
<div className="bd-example">
    <Button type="button" variant="primary btn-icon rounded-pill" size="xs">
        <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>    
    </Button>{' '}
    <Button type="button" variant="primary btn-icon rounded-pill" size="sm">
        <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg> 
    </Button>{' '}
    <Button type="button" variant="primary btn-icon rounded-pill">
        <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg> 
    </Button>{' '}
    <Button type="button" variant="primary btn-icon rounded-pill" size="lg">
        <svg width="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg> 
    </Button>
</div>
Button Group
Documentation
<div className="bd-example">
    <div className="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <ButtonGroup className="me-2" role="group" aria-label="First group">
            <Button type="button" variant="secondary">1</Button>
            <Button type="button" variant="secondary">2</Button>
            <Button type="button" variant="secondary">3</Button>
            <Button type="button" variant="secondary">4</Button>
        </ButtonGroup>
        <div className="btn-group me-2" role="group" aria-label="Second group">
            <Button type="button" variant="secondary">5</Button>
            <Button type="button" variant="secondary">6</Button>
            <Button type="button" variant="secondary">7</Button>
        </div>
        <div className="btn-group" role="group" aria-label="Third group">
            <Button type="button" variant="secondary">8</Button>
        </div>
    </div>
</div>
<div className="bd-example">
    <div className="btn-group" role="group" aria-label="Basic example">
        <Button type="button" variant="primary">Home</Button>
        <Button type="button" variant="outline-primary">Profile</Button>
        <Button type="button" variant="outline-primary">Message</Button>
    </div>
</div>
<div className="bd-example">
    <div className="btn-group-vertical" role="group" aria-label="Basic example">
        <Button type="button" variant="primary">Home</Button>
        <Button type="button" variant="outline-primary">Profile</Button>
        <Button type="button" variant="outline-primary">Message</Button>
    </div>
</div>
<div className="bd-example">
    <div className="btn-group iq-qty-btn me-4" data-qty="btn" role="group">
        <Button variant="outline-primary iq-quantity-minus" size="sm" onClick={decrease}>
            <svg xmlns="http://www.w3.org/2000/svg" width="6" height="3" viewBox="0 0 6 3" fill="none">
                <path d="M5.22727 0.886364H0.136364V2.13636H5.22727V0.886364Z" fill="currentColor"></path>
            </svg>
        </Button> 
        <input type="text" data-qty="input" className="btn btn-sm btn-outline-primary input-display" disabled value={counter}  title="Qty" placeholder=""/>
        <Button variant="outline-primary iq-quantity-plus" size="sm" onClick={increase}>
            <svg xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 9 8" fill="none">
                <path d="M3.63636 7.70455H4.90909V4.59091H8.02273V3.31818H4.90909V0.204545H3.63636V3.31818H0.522727V4.59091H3.63636V7.70455Z" fill="currentColor"></path>
            </svg>
        </Button>
    </div>
    <div className="btn-group iq-qty-btn me-4" data-qty="btn" role="group">
        <Button variant="outline-secondary iq-quantity-minus" size="sm" onClick={decrease}>
            <svg xmlns="http://www.w3.org/2000/svg" width="6" height="3" viewBox="0 0 6 3" fill="none">
                <path d="M5.22727 0.886364H0.136364V2.13636H5.22727V0.886364Z" fill="currentColor"></path>
            </svg>
        </Button> 
        <input type="text" data-qty="input" className="btn btn-sm btn-outline-secondary input-display" disabled value={counter}  title="Qty" placeholder=""/>
        <Button variant="outline-secondary iq-quantity-plus" size="sm" onClick={increase}>
            <svg xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 9 8" fill="none">
                <path d="M3.63636 7.70455H4.90909V4.59091H8.02273V3.31818H4.90909V0.204545H3.63636V3.31818H0.522727V4.59091H3.63636V7.70455Z" fill="currentColor"></path>
            </svg>
        </Button>
    </div>
    <div className="btn-group iq-qty-btn" data-qty="btn" role="group">
        <Button variant="outline-light iq-quantity-minus" size="sm" onClick={decrease}>
            <svg xmlns="http://www.w3.org/2000/svg" width="6" height="3" viewBox="0 0 6 3" fill="none">
                <path d="M5.22727 0.886364H0.136364V2.13636H5.22727V0.886364Z" fill="currentColor"></path>
            </svg>
        </Button> 
        <input type="text" data-qty="input" className="btn btn-sm btn-outline-light input-display" disabled value={counter}  title="Qty" placeholder=""/>
        <Button variant="outline-light iq-quantity-plus" size="sm" onClick={increase}>
            <svg xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 9 8" fill="none">
                <path d="M3.63636 7.70455H4.90909V4.59091H8.02273V3.31818H4.90909V0.204545H3.63636V3.31818H0.522727V4.59091H3.63636V7.70455Z" fill="currentColor"></path>
            </svg>
        </Button>
    </div>
</div>
Calendar
Documentation
<div className="bd-example">
    <div className="input-group">
        <input type="text" className="form-control vanila-datepicker" placeholder="Date Picker"/>
    </div>
</div>  
<div className="bd-example">
    <div className="form-group vanila-daterangepicker d-flex flex-row">
        <input type="text" name="start" className="form-control" placeholder="From Date"/>
        <span className="flex-grow-0">
            <span className="btn">To</span>
        </span>
        <input type="text" name="end" className="form-control" placeholder="From Date"/>
    </div>
</div>
<div className="bd-example">
    <div className="input-group">
        <div className="vanila-datepicker"></div>
    </div>
</div>
Card
Documentation
PlaceholderImage 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

Featured

Card title

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

Go somewhere
2 days ago
Card title

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

  • An item
  • A second item
  • A third item
Card link Another link
PlaceholderImage
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

<div className="bd-example">
    <Row className="row-cols-1 row-cols-md-2 g-4">
        <Col> 
            <Card className="mb-0">
                <svg className="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="30%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
                <Card.Body>
                    <h5 className="card-title">Card title</h5>
                    <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <Link href="/" className="btn btn-primary">Go somewhere</Link>
                </Card.Body>
            </Card>
        </Col>
        <Col>
            <Card className="mb-0">
            <Card.Header>
                Featured
            </Card.Header>
            <Card.Body>
                <h5 className="card-title">Card title</h5>
                <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <Link href="/" className="btn btn-primary">Go somewhere</Link>
            </Card.Body>
            <Card.Footer className="text-muted">
                2 days ago
            </Card.Footer>
            </Card>
        </Col>
        <Col>
            <Card className="mb-0">
            <Card.Body>
                <h5 className="card-title">Card title</h5>
                <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </Card.Body>
            <ul className="list-group list-group-flush">
                <li className="list-group-item">An item</li>
                <li className="list-group-item">A second item</li>
                <li className="list-group-item">A third item</li>
            </ul>
            <Card.Body>
                <Link href="#" className="card-link">Card link</Link>
                <Link href="#" className="card-link">Another link</Link>
            </Card.Body>
            </Card>
        </Col>
        <Col>
            <Card className="mb-0">
            <Row className="g-0">
                <Col md="4">
                <svg className="bd-placeholder-img" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="30%" y="50%" fill="#dee2e6" dy=".3em">Image</text></svg>
                </Col>
                <Col md="8">
                <Card.Body>
                    <h5 className="card-title">Card title</h5>
                    <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
                </Card.Body>
                </Col>
            </Row>
            </Card>
        </Col>
    </Row>
</div>
Collapse
Documentation
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
List Group
Documentation
  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  1. Subheading
    Cras justo odio
    14
  2. Subheading
    Cras justo odio
    14
  3. Subheading
    Cras justo odio
    14
A simple default list group itemA simple primary list group itemA simple secondary list group itemA simple success list group itemA simple danger list group itemA simple warning list group itemA simple info list group itemA simple light list group itemA simple dark list group itemA simple gray list group item
  • A list item14
  • A second list item2
  • A third list item1
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
<div className="bg-example">
    <ListGroup as="ul" >
        <ListGroup.Item as="li" active aria-current="true">An active item</ListGroup.Item>
        <ListGroup.Item disabled>A second item</ListGroup.Item>
        <ListGroup.Item action href="#" >A third link item</ListGroup.Item>
        <ListGroup.Item action type="button" >A fourth button item</ListGroup.Item>
        <ListGroup.Item>And a fifth one</ListGroup.Item>
    </ListGroup>
    </div>

    <div className="bd-example">
    <ListGroup as="ul" >
        <ListGroup.Item as="li" disabled>A disabled item</ListGroup.Item>
        <ListGroup.Item as="li">A second item</ListGroup.Item>
        <ListGroup.Item as="li">A third item</ListGroup.Item>
        <ListGroup.Item as="li">A fourth item</ListGroup.Item>
        <ListGroup.Item as="li">And a fifth one</ListGroup.Item>
    </ListGroup>
    </div>
    <div className="bd-example">
    <ListGroup as="ul" className=" list-group-flush">
        <ListGroupItem as="li">An item</ListGroupItem>
        <ListGroupItem as="li">A second item</ListGroupItem>
        <ListGroupItem as="li">A third item</ListGroupItem>
        <ListGroupItem as="li">A fourth item</ListGroupItem>
        <ListGroupItem as="li">And a fifth one</ListGroupItem>
    </ListGroup>
    </div>

    <div className="bd-example">
    <ListGroup as="ol" className="list-group-numbered">
        <ListGroupItem as="li" className=" d-flex justify-content-between align-items-start">
            <div className="ms-2 me-auto">
                <div className="fw-bold">Subheading</div>
                Cras justo odio
            </div>
            <span className="badge bg-primary rounded-pill">14</span>
        </ListGroupItem>
        <ListGroupItem as="li" className=" d-flex justify-content-between align-items-start">
            <div className="ms-2 me-auto">
                <div className="fw-bold">Subheading</div>
                Cras justo odio
            </div>
            <span className="badge bg-primary rounded-pill">14</span>
        </ListGroupItem>
        <ListGroupItem as="li" className="d-flex justify-content-between align-items-start">
            <div className="ms-2 me-auto">
                <div className="fw-bold">Subheading</div>
                Cras justo odio
            </div>
            <span className="badge bg-primary rounded-pill">14</span>
        </ListGroupItem>
    </ListGroup>
    </div>

    <div className="bd-example">
    <ListGroup>
        <ListGroupItem href="#" action >A simple default list group item</ListGroupItem>                        
        <ListGroupItem href="#" action variant="primary">A simple primary list group item</ListGroupItem>
        <ListGroupItem href="#" action variant="secondary">A simple secondary list group item</ListGroupItem>
        <ListGroupItem href="#" action variant="success">A simple success list group item</ListGroupItem>
        <ListGroupItem href="#" action variant="danger">A simple danger list group item</ListGroupItem>
        <ListGroupItem href="#" action variant="warning">A simple warning list group item</ListGroupItem>
        <ListGroupItem href="#" action variant="info">A simple info list group item</ListGroupItem>
        <ListGroupItem href="#" action variant="light">A simple light list group item</ListGroupItem>
        <ListGroupItem href="#"  action variant="dark">A simple dark list group item</ListGroupItem>
    </ListGroup>
    </div>

    <div className="bd-example">
    <ListGroup as="ul">
        <ListGroupItem as="li" className="d-flex justify-content-between align-items-center">
            A list item
            <span className="badge bg-primary rounded-pill">14</span>
        </ListGroupItem>
        <ListGroupItem as="li" className="d-flex justify-content-between align-items-center">
            A second list item
            <span className="badge bg-primary rounded-pill">2</span>
        </ListGroupItem>
        <ListGroupItem as="li" className="d-flex justify-content-between align-items-center">
            A third list item
            <span className="badge bg-primary rounded-pill">1</span>
        </ListGroupItem>
    </ListGroup>
    </div>

    <div className="bd-example">
    <ListGroup>
        <ListGroupItem href="#" className="list-group-item-action active" aria-current="true">
            <div className="d-flex w-100 justify-content-between">
                <h5 className="mb-1">List group item heading</h5>
                <small>3 days ago</small>
            </div>
            <p className="mb-1">Some placeholder content in a paragraph.</p>
            <small>And some small print.</small>
        </ListGroupItem>
        <ListGroupItem href="#" className="list-group-item-action">
            <div className="d-flex w-100 justify-content-between">
                <h5 className="mb-1">List group item heading</h5>
                <small className="text-muted">3 days ago</small>
            </div>
            <p className="mb-1">Some placeholder content in a paragraph.</p>
            <small className="text-muted">And some muted small print.</small>
        </ListGroupItem>
        <ListGroupItem href="#" className="list-group-item-action">
            <div className="d-flex w-100 justify-content-between">
                <h5 className="mb-1">List group item heading</h5>
                <small className="text-muted">3 days ago</small>
            </div>
            <p className="mb-1">Some placeholder content in a paragraph.</p>
            <small className="text-muted">And some muted small print.</small>
        </ListGroupItem>
    </ListGroup>
    </div>

    <div className="bd-example">
    <ListGroup>
        <ListGroupItem as="label">
            <input className="form-check-input me-1" type="checkbox" defaultValue=""/>
            First checkbox
        </ListGroupItem>
        <ListGroupItem as="label">
            <input className="form-check-input me-1" type="checkbox" defaultValue=""/>
            Second checkbox
        </ListGroupItem>
        <ListGroupItem as="label">
            <input className="form-check-input me-1" type="checkbox" defaultValue=""/>
            Third checkbox
        </ListGroupItem>
        <ListGroupItem as="label">
            <input className="form-check-input me-1" type="checkbox" defaultValue=""/>
            Fourth checkbox
        </ListGroupItem>
        <ListGroupItem as="label">
            <input className="form-check-input me-1" type="checkbox" defaultValue=""/>
            Fifth checkbox
        </ListGroupItem>
    </ListGroup>
</div>
Off Canvas
Documentation
<div className="bd-example">
    <Button variant="primary mt-2" onClick={handleShow5}>
        Toggle top offcanvas
    </Button>
    <Offcanvas show={show5} placement={'top'} onHide={handleClose5}>
        <Offcanvas.Header closeButton>
            <Offcanvas.Title>Offcanvas top</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
                ...
        </Offcanvas.Body>
    </Offcanvas>
    <Button variant="primary mt-2" onClick={handleShow6}>
        Toggle right offcanvas
    </Button>
    <Offcanvas show={show6} placement={'end'} onHide={handleClose6}>
        <Offcanvas.Header closeButton>
            <Offcanvas.Title>Offcanvas right</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
                ...
        </Offcanvas.Body>
    </Offcanvas>
    <Button variant="primary mt-2" onClick={handleShow7}>
        Toggle bottom offcanvas
    </Button>
    <Offcanvas show={show7} placement={'bottom'} onHide={handleClose7}>
        <Offcanvas.Header closeButton>
            <Offcanvas.Title>Offcanvas bottom</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
                ...
        </Offcanvas.Body>
    </Offcanvas>
    <Button variant="primary mt-2" onClick={handleShow8}>
        Toggle Left offcanvas
    </Button>
    <Offcanvas show={show8}  onHide={handleClose8}>
        <Offcanvas.Header closeButton>
            <Offcanvas.Title>Offcanvas Left</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
                ...
        </Offcanvas.Body>
    </Offcanvas>
    <Button variant="primary mt-2" onClick={handleShow9} >
        Toggle Scroll offcanvas
    </Button>
    <Offcanvas show={show9}  onHide={handleClose9} scroll={true}>
        <Offcanvas.Header closeButton>
            <Offcanvas.Title>Offcanvas Scroll</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
                ...
        </Offcanvas.Body>
    </Offcanvas>
</div>
Pagination
Documentation
<div className="bd-example">
    <nav aria-label="Pagination example">
        <ul className="pagination pagination-sm">
            <li className="page-item"><Link className="page-link" href="#">1</Link></li>
            <li className="page-item active" aria-current="page">
                <Link className="page-link" href="#">2</Link>
            </li>
            <li className="page-item"><Link className="page-link" href="#">3</Link></li>
        </ul>
    </nav>
</div>

<div className="bd-example">
    <nav aria-label="Standard pagination example">
        <ul className="pagination">
            <li className="page-item">
                <Link className="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </Link>
            </li>
                <li className="page-item"><Link className="page-link" href="#">1</Link></li>
                <li className="page-item"><Link className="page-link" href="#">2</Link></li>
                <li className="page-item"><Link className="page-link" href="#">3</Link></li>
                <li className="page-item">
                <Link className="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">»</span>
                </Link>
            </li>
        </ul>
    </nav>
</div>

<div className="bd-example">
    <nav aria-label="Another pagination example">
        <ul className="pagination pagination-lg flex-wrap">
            <li className="page-item disabled">
                <Link className="page-link" href="#" tabIndex="-1" aria-disabled="true">Previous</Link>
            </li>
            <li className="page-item"><Link className="page-link" href="#">1</Link></li>
            <li className="page-item active" aria-current="page">
                <Link className="page-link" href="#">2</Link>
            </li>
            <li className="page-item"><Link className="page-link" href="#">3</Link></li>
            <li className="page-item">
            <Link className="page-link" href="#">Next</Link>
            </li>
        </ul>
    </nav>
</div>
Popovers
Documentation
<div className="bd-example">
    <OverlayTrigger trigger="click" placement="right" overlay={
            <Popover id="popover-basic">
                <Popover.Header as="h3">Popover Title</Popover.Header>
                <Popover.Body>
                    And here's some amazing content. It's very engaging.
                    Right?
                </Popover.Body>
            </Popover>
        }>
        <Button variant="danger mt-2">Click to toggle popover</Button>
    </OverlayTrigger>
</div>
<div className="bd-example">
    <OverlayTrigger trigger="click" placement="top" overlay={
            <Popover id="popover-basic">
                <Popover.Body>Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</Popover.Body>
            </Popover>
        }>
        <Button  variant="gray mt-2">Popover on top</Button>
    </OverlayTrigger>
    <OverlayTrigger trigger="click" placement="right" overlay={
            <Popover id="popover-basic">
                <Popover.Body>Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</Popover.Body>
            </Popover>
        }>
        <Button variant="gray mt-2">Popover on end</Button>
    </OverlayTrigger>
    <OverlayTrigger trigger="click" placement="bottom" overlay={
            <Popover id="popover-basic">
                <Popover.Body>Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</Popover.Body>
            </Popover>
        }>
        <Button variant="gray mt-2">Popover on Bottom</Button>
    </OverlayTrigger>
    <OverlayTrigger trigger="click" placement="left" overlay={
            <Popover id="popover-basic">
                <Popover.Body>Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</Popover.Body>
            </Popover>
        }>
        <Button variant="gray mt-2">Popover on Start</Button>
    </OverlayTrigger>
</div>
Progress
Documentation
0%
25%
50%
75%
100%
40%
40%
40%
<div className="bd-example">
    <ProgressBar className="mb-3" now={5} label={'5%'}/>
    <ProgressBar className="mb-3 w-100" now={25} label={'25%'} variant="success" />
    <ProgressBar className="mb-3 text-dark w-100" now={50} label={'50%'} variant="info"/>
    <ProgressBar className="mb-3 text-dark w-100" now={75} label={'75%'} variant="warning"/>
    <ProgressBar className="mb-3 text-dark w-100" now={100} label={'100%'} variant="danger"/>
</div>
<div className="bd-example">
    <div className="wrapper-progress">
        <div className="percentage-progress d-flex justify-content-end">
            <div><span>40%</span></div>
        </div>
    </div>
    <div className="progress" style={{height:"10px"}}>
        <ProgressBar className="mb-3" now={75} animated striped variant="danger"  style={{width: "40%", height:"10px"}}/>
    </div>
    <div className="wrapper-progress mt-4">
        <div className="percentage-progress d-flex justify-content-end">
            <div><span>40%</span></div>
        </div>
    </div>
    <div className="progress"  style={{height:"10px"}}>
        <ProgressBar className="mb-3" now={75} animated striped variant="primary"  style={{width: "40%", height:"10px"}}/>
    </div>
    <div className="wrapper-progress mt-4">
        <div className="percentage-progress d-flex justify-content-end">
            <div><span>40%</span></div>
        </div>
    </div>
    <div className="progress" style={{height:"10px"}}>
        <ProgressBar className="mb-3" now={75} animated striped variant="success"  style={{width: "40%", height:"10px"}}/>
    </div>
</div>

<div className="bd-example">
<ProgressBar>
    <ProgressBar  now={30} animated striped />
    <ProgressBar variant="success" now={40} animated striped />
</ProgressBar>
</div>
Ribbon
Documentation
New
Discount
New Offers
<div className="bd-example">
    <div className="bg-gray position-relative rounded" style={{height: '200px'}}>
        <div className="iq-ribbon-effect text-primary">
            <span>New</span>
        </div>
        <div className="iq-ribbon-effect text-success" style={{marginLeft: '5rem'}}>
            <span>Discount</span>
        </div>
        <div className="iq-ribbon-effect text-danger" style={{marginLeft: '10rem'}}>
            <span>New Offers</span>
        </div>
    </div>
</div>
Scrollspy
Documentation
First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Second heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Third heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Fourth heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Fifth heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

<div className="bd-example">
    <Nav as='nav' id="navbar-example2" className="navbar navbar-light bg-light px-3" >
        <Navbar.Brand  href="#">Navbar</Navbar.Brand>
            <ul  className="nav nav-pills">
                <Nav.Item as="li">
                    <Nav.Link   href="#scrollspyHeading1">First</Nav.Link>
                </Nav.Item>
                <Nav.Item as="li">
                    <Nav.Link href="#scrollspyHeading2">Second</Nav.Link>
                </Nav.Item>
                <NavDropdown  title="Dropdown">
                        <NavDropdown.Item   href="#scrollspyHeading3">Third</NavDropdown.Item>
                        <NavDropdown.Item   href="#scrollspyHeading4">Fourth</NavDropdown.Item>
                        <NavDropdown.Divider/>
                        <NavDropdown.Item   href="#scrollspyHeading5">Fifth</NavDropdown.Item>
                </NavDropdown>
            </ul>
    </Nav>   
    <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" className="scrollspy-example" tabIndex="0">
        <h4 id="scrollspyHeading1">First heading</h4>
        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
        <h4 id="scrollspyHeading2">Second heading</h4>
        <h4 id="scrollspyHeading3">Third heading</h4>
        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
        <h4 id="scrollspyHeading4">Fourth heading</h4>
        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
        <h4 id="scrollspyHeading5">Fifth heading</h4>
        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
     </div>
</div>
Spinners
Documentation
<div className="bd-example">                
    <Spinner animation="border" variant="primary" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="border" variant="secondary" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="border" variant="success" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="border" variant="danger" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="border" variant="warning" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="border" variant="info" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="border" variant="light" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="border" variant="dark" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
</div>
<div className="bd-example">                                
    <Spinner animation="grow" className="text-primary" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="grow" className="text-secondary" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="grow" className="text-success" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="grow" className="text-danger" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="grow" className="text-warning" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="grow" className="text-info" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="grow" className="text-light" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
    <Spinner animation="grow" className="text-dark" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
</div>
<div className="bd-example">
    <Button variant="primary" disabled>
        <Spinner
        as="span"
        animation="border"
        size="sm"
        role="status"
        aria-hidden="true"
        />
        <span className="visually-hidden">Loading...</span>
    </Button>{' '}
    <Button variant="primary" disabled>
        <Spinner
        as="span"
        animation="border"
        size="sm"
        role="status"
        aria-hidden="true"
        />
        Loading...
    </Button>{' '}
    <Button variant="primary" disabled>
        <Spinner
        as="span"
        animation="grow"
        size="sm"
        role="status"
        aria-hidden="true"
        />
        <span className="visually-hidden">Loading...</span>
    </Button>{' '}
    <Button variant="primary" disabled>
        <Spinner
        as="span"
        animation="grow"
        size="sm"
        role="status"
        aria-hidden="true"
        />
        Loading...
    </Button>
</div>
Toasts
Documentation
<div className="bd-example bg-dark p-5 align-items-center">
    <Toast className=" fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <Toast.Header>
            <svg className="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
            <strong className="me-auto">Bootstrap</strong>
            <small className="text-muted">11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
            Hello, world! This is a toast message.
        </Toast.Body>
    </Toast>
</div>
<div className="bd-example bg-dark p-5 align-items-center">
    <Toast className=" fade show align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
        <div className="d-flex">
            <Toast.Body>
                Hello, world! This is a toast message.
            </Toast.Body>
            <button type="button" className="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </Toast>
</div>
<div className="bd-example bg-dark p-5 align-items-center">
    <Toast className=" fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <Toast.Body>
            Hello, world! This is a toast message.
            <div className="mt-2 pt-2 border-top">
            <Button type="button" variant="primary">Take action</Button>{' '}
            <Button type="button" variant="dark" data-bs-dismiss="toast">Close</Button>
            </div>
        </Toast.Body>
    </Toast>
</div>
Tooltips
Documentation
<div className="bd-example tooltip-demo">
    <OverlayTrigger placement="top" overlay={
        <Tooltip >
            Tooltip on top
        </Tooltip>
        }>
        <Button variant="gray mt-2">Tooltip on top</Button>
    </OverlayTrigger>
    <OverlayTrigger  placement="right" overlay={
        <Tooltip >
            Tooltip on right
        </Tooltip>
        }>
        <Button variant="gray mt-2">Tooltip on right</Button>
    </OverlayTrigger>
    <OverlayTrigger  placement="bottom" overlay={
        <Tooltip >
            Tooltip on bottom
        </Tooltip>
        }>
        <Button variant="gray mt-2">Tooltip on bottom</Button>
    </OverlayTrigger>
    <OverlayTrigger  placement="left" overlay={
        <Tooltip >
            Tooltip on left
        </Tooltip>
        }>
        <Button variant="gray mt-2">Tooltip on left</Button>
    </OverlayTrigger>
    <OverlayTrigger  placement="top" overlay={
        <Tooltip >
            <em>Tooltip</em> <u>with</u> <b>HTML</b> 
        </Tooltip>
        }>
        <Button variant="gray mt-2">Tooltip with HTML</Button>
    </OverlayTrigger>
</div>

Forms

Overview
Documentation
We'll never share your email with anyone else.
Radios buttons
<div className="bd-example">
    <form>
        <div className="mb-3">
            <Form.Label htmlFor="exampleInputEmail1" className="">Email address</Form.Label>
            <Form.Control type="email" className="" id="exampleInputEmail1" autoComplete="username email"  aria-describedby="emailHelp"/>
            <div id="emailHelp" className="form-text">We'll never share your email with anyone else.</div>
        </div>
        <div className="mb-3">
            <Form.Label htmlFor="exampleInputPassword1" className="">Password</Form.Label>
            <Form.Control type="password" className="" id="exampleInputPassword1" autoComplete="current-password"/>
        </div>
        <Form.Check className="mb-3 form-check">
            <FormCheck.Input type="checkbox" className="" id="exampleCheck1"/>
            <FormCheck.Label className="" htmlFor="exampleCheck1">Check me out</FormCheck.Label>
        </Form.Check>
        <fieldset className="mb-3">
            <legend>Radios buttons</legend>
            <Form.Check className="">
                <FormCheck.Input type="radio" name="radios" className="" id="exampleRadio1"/>
                <FormCheck.Label className="" htmlFor="exampleRadio1">Default radio</FormCheck.Label>
            </Form.Check>
            <Form.Check className="mb-3 ">
                <FormCheck.Input type="radio" name="radios" className="" id="exampleRadio2"/>
                <FormCheck.Label className="" htmlFor="exampleRadio2">Another radio</FormCheck.Label>
            </Form.Check>
        </fieldset>
        <div className="mb-3">
            <Form.Label className="" htmlFor="customFile">Upload</Form.Label>
            <Form.Control type="file" className="" id="customFile"/>
        </div>
        <Form.Check className="mb-3 form-switch">
            <FormCheck.Input className="form-check-input" type="checkbox" id="flexSwitchCheckChecked" defaultChecked/>
            <FormCheck.Label className="form-check-label" htmlFor="flexSwitchCheckChecked">Checked switch checkbox input</FormCheck.Label>
        </Form.Check>
        <div className="mb-3">
            <Form.Label htmlFor="customRange3" className="form-label">Example range</Form.Label>
            <Form.Range />
        </div>
        <button type="submit" className="btn btn-primary">Submit</button>
    </form>
</div>
Disabled Forms
Documentation
Disabled radios buttons
<div className="bd-example">
    <Form>
        <fieldset disabled="" aria-label="Disabled fieldset example">
            <div className="mb-3">
                <Form.Label htmlFor="disabledTextInput" className="">Disabled input</Form.Label>
                <Form.Control type="text" id="disabledTextInput" className="" placeholder="Disabled input"/>
            </div>
            <div className="mb-3">
                <Form.Label htmlFor="disabledSelect" className="">Disabled select menu</Form.Label>
                <Form.Select id="disabledSelect" className="">
                    <option>Disabled select</option>
                </Form.Select>
            </div>
            <div className="mb-3">
                <Form.Check className="">
                    <FormCheck.Input className="" type="checkbox" id="disabledFieldsetCheck" disabled=""/>
                    <FormCheck.Label className="" htmlFor="disabledFieldsetCheck">
                    Can't check this
                    </FormCheck.Label>
                </Form.Check>
            </div>
            <fieldset className="mb-3">
                <legend>Disabled radios buttons</legend>
                <Form.Check className="">
                    <FormCheck.Input type="radio" name="radios" className="" id="disabledRadio1" disabled=""/>
                    <FormCheck.Label className="" htmlFor="disabledRadio1">Disabled radio</FormCheck.Label>
                </Form.Check>
                <Form.Check className="mb-3 ">
                    <FormCheck.Input type="radio" name="radios" className="" id="disabledRadio2" disabled=""/>
                    <FormCheck.Label className="" htmlFor="disabledRadio2">Another radio</FormCheck.Label>
                </Form.Check>
            </fieldset>
            <div className="mb-3">
                <Form.Label className="" htmlFor="disabledCustomFile">Upload</Form.Label>
                <Form.Control type="file" className="" id="disabledCustomFile" disabled=""/>
            </div>
            <Form.Check className="mb-3  form-switch">
                <FormCheck.Input className="" type="checkbox" id="disabledSwitchCheckChecked" defaultChecked disabled=""/>
                <FormCheck.Label className="" htmlFor="disabledSwitchCheckChecked">Disabled checked switch checkbox input</FormCheck.Label>
            </Form.Check>
            <div className="mb-3">
                <Form.Label htmlFor="disabledRange" className="">Disabled range</Form.Label>
                <Form.Range disabled={true} />
            </div>
            <button type="submit" className="btn btn-primary">Submit</button>
        </fieldset>
    </Form>
</div>
Sizing
Documentation
<div className="bd-example">
    <div className="mb-3">
        <Form.Control className=" form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example"/>
    </div>
    <div className="mb-3">
        <Form.Select className=" form-select-lg mb-3" aria-label=".form-select-lg example">
            <option defaultValue="">Open this select menu</option>
            <option defaultValue="1">One</option>
            <option defaultValue="2">Two</option>
            <option defaultValue="3">Three</option>
        </Form.Select>
    </div>
    <div className="mb-3">
        <Form.Control type="file" className="form-control-lg" aria-label="Large file input example"/>
    </div>
</div>
<div className="bd-example">
    <div className="mb-3">
        <Form.Control className=" form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example"/>
    </div>
    <div className="mb-3">
        <Form.Select className="form-select-sm" aria-label=".form-select-sm example">
            <option defaultValue="">Open this select menu</option>
            <option defaultValue="1">One</option>
            <option defaultValue="2">Two</option>
            <option defaultValue="3">Three</option>
        </Form.Select>
    </div>
    <div className="mb-3">
        <Form.Control type="file" className=" form-control-sm" aria-label="Small file input example"/>
    </div>
</div>
Input Group
Documentation
@
@example.com
https://example.com/users/
$.00
With textarea
<div className="bd-example">
    <InputGroup className=" mb-3">
        <span className="input-group-text" id="basic-addon1">@</span>
        <Form.Control type="text" className="" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
    </InputGroup>
    <InputGroup className=" mb-3">
        <Form.Control type="text" className="" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
        <span className="input-group-text" id="basic-addon2">@example.com</span>
    </InputGroup>
    <Form.Label htmlFor="basic-url" className="form-label">Your vanity URL</Form.Label>
    <InputGroup className=" mb-3">
        <span className="input-group-text" id="basic-addon3">https://example.com/users/</span>
        <Form.Control type="text" className="" id="basic-url" aria-describedby="basic-addon3"/>
    </InputGroup>
    <InputGroup className=" mb-3">
        <span className="input-group-text">$</span>
        <Form.Control type="text" className="" aria-label="Amount (to the nearest dollar)"/>
        <span className="input-group-text">.00</span>
    </InputGroup>
    <InputGroup className="">
        <span className="input-group-text">With textarea</span>
        <textarea className="form-control" aria-label="With textarea"></textarea>
    </InputGroup>
</div>
Filled Input
Documentation
@
@
 <div className="bd-example">
    <Form.Group className=" form-group form-group-filled-alt">
        <Form.Control type="text" className="" placeholder="Enter Text"/>
    </Form.Group>
    <Form.Group className=" input-group form-group form-group-filled-alt">
        <span className="input-group-text" id="basic-addon1">@</span>
        <Form.Control type="text" className="" placeholder="Addon" aria-label="Username" aria-describedby="basic-addon1"/>
    </Form.Group>
    <Form.Group className=" input-group form-group form-group-filled-alt">
        <Form.Control type="text" className="" placeholder="Addon" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
        <span className="input-group-text" id="basic-addon2">@</span>
    </Form.Group>
    <Form.Group className=" form-group form-group-filled-alt">
        <Form.Control type="text" className=" is-valid" placeholder="Enter Text"/>
    </Form.Group>
    <Form.Group className=" form-group form-group-filled-alt">
        <Form.Control type="text" className=" is-invalid" placeholder="Enter Text"/>
    </Form.Group>
</div>
Alternate Input
Documentation
@
@
 <div className="bd-example">
    <Form.Group className=" form-group-alt">
        <Form.Control type="text" className="" placeholder="Enter Text"/>
    </Form.Group>
    <Form.Group className=" input-group form-group-alt">
        <span className="input-group-text" id="basic-addon1">@</span>
        <Form.Control type="text" className="" placeholder="Addon" aria-label="Username" aria-describedby="basic-addon1"/>
    </Form.Group>
    <Form.Group className=" input-group form-group-alt">
        <Form.Control type="text" className="" placeholder="Addon" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
        <span className="input-group-text" id="basic-addon2">@</span>
    </Form.Group>
    <Form.Group className=" form-group-alt">
        <Form.Control type="text" className=" is-valid" placeholder="Enter Text"/>
    </Form.Group>
    <Form.Group className=" form-group-alt">
        <Form.Control type="text" className=" is-invalid" placeholder="Enter Text"/>
    </Form.Group>
</div>
Floating Labels
Documentation
<div className="bd-example">
    <Form>
        <Form.Floating className=" mb-3">
            <Form.Control type="email" className="" id="floatingInput1" autoComplete="username email"  placeholder="name@example.com"/>
            <Form.Label htmlFor="floatingInput">Email address</Form.Label>
        </Form.Floating>
        <Form.Floating className="mb-3">
            <Form.Control type="password" className="" id="floatingPassword" autoComplete="current-password" placeholder="Password"/>
            <Form.Label htmlFor="floatingPassword">Password</Form.Label>
        </Form.Floating>
        <Form.Floating className="form-floating form-group mb-3">
            <Form.Control type="email" className="" disabled id="floatingInput2" autoComplete="username email" placeholder="Place Holder"/>
            <Form.Label htmlFor="floatingInput">Regular</Form.Label>
        </Form.Floating>
        <Form.Floating className="form-floating form-group mb-3">
            <Form.Control type="email" className="is-invalid" id="floatingInput3" autoComplete="username email" 
                placeholder="Place Holder"/>
            <Form.Label htmlFor="floatingInput">Regular</Form.Label>
        </Form.Floating>
        <Form.Floating className="form-floating form-group">
            <Form.Control type="email" className="is-invalid" id="floatingInput4" autoComplete="username email" 
                placeholder="Place Holder"/>
            <Form.Label htmlFor="floatingInput">Regular</Form.Label>
        </Form.Floating>
    </Form>
</div>
Alertnate Float Labels
Documentation
<div className="bd-example">
    <Form.Floating className=" custom-form-floating custom-form-floating-sm form-group mb-3">
        <Form.Control type="email" className="" id="floatingInput5" autoComplete="username email"  placeholder="Place Holder"/>
        <label htmlFor="floatingInput">Small</label>
    </Form.Floating>
    <Form.Floating className=" custom-form-floating form-group mb-3">
        <Form.Control type="email" className="" id="floatingInput6" autoComplete="username email"  placeholder="Place Holder"/>
        <label htmlFor="floatingInput">Regular</label>
    </Form.Floating>
    <Form.Floating className="custom-form-floating custom-form-floating-lg form-group mb-3">
        <Form.Control type="email" className="form-control" id="floatingInput7" autoComplete="username email" placeholder="Place Holder"/>
        <label htmlFor="floatingInput">Large</label>
    </Form.Floating>
    <Form.Floating className="custom-form-floating form-group mb-3">
        <Form.Control type="email" className="" disabled id="floatingInput8" autoComplete="username email" placeholder="Place Holder"/>
        <label htmlFor="floatingInput">Regular</label>
    </Form.Floating>
    <Form.Floating className=" custom-form-floating form-group mb-3">
        <Form.Control type="email" className="form-control is-valid" id="floatingInput" autoComplete="username email"  placeholder="Place Holder"/>
        <label htmlFor="floatingInput">Regular</label>
    </Form.Floating>
    <div className="form-floating custom-form-floating form-group mb-3">
        <Form.Control type="email" className=" is-invalid" id="floatingInput9" autoComplete="username email"  placeholder="Place Holder"/>
        <label htmlFor="floatingInput">Regular</label>
    </div>
</div>
Toggle Button
Documentation
<div className="bd-example">
    <Form.Check className=" form-check-inline">
        <FormCheck.Input type="checkbox" className="form-check-input" id="customCheck5"/>
        <FormCheck.Label className="form-check-label pl-2" htmlFor="customCheck5">Checkbox</FormCheck.Label>
    </Form.Check>
    <Form.Check className=" form-check-inline">
        <FormCheck.Input type="checkbox" className="form-check-input" id="customCheck6" defaultChecked/>
        <FormCheck.Label className="form-check-label pl-2" htmlFor="customCheck6">Checked</FormCheck.Label>
    </Form.Check>
    <Form.Check className=" form-check-inline">
        <FormCheck.Input type="checkbox" id="customCheck7" disabled=""/>
        <FormCheck.Label className=" pl-2" htmlFor="customCheck7">Disabled</FormCheck.Label>
    </Form.Check>
    <Form.Check className=" form-check-inline">
        <FormCheck.Input type="checkbox" id="customCheck8" defaultChecked
            disabled=""/>
        <FormCheck.Label  className=" pl-2" htmlFor="customCheck8">Disabled Checked</FormCheck.Label>
    </Form.Check>
</div>
<div className="bd-example">
    <Form.Check className=" form-check-inline">
        <FormCheck.Input type="radio" name="bsradio" id="radio1"
            defaultChecked/>
        <FormCheck.Label htmlFor="radio1" className=" pl-2">Active</FormCheck.Label>
    </Form.Check>
    <Form.Check className=" form-check-inline">
        <FormCheck.Input type="radio" name="bsradio" id="radio2"/>
        <FormCheck.Label htmlFor="radio2" className=" pl-2">Inactive</FormCheck.Label>
    </Form.Check>
    <div className="form-check form-check-inline">
        <FormCheck.Input type="radio" name="bsradio1" id="radio3"
            disabled="" defaultChecked/>
        <FormCheck.Label htmlFor="radio3" className=" pl-2">Active - Disabled</FormCheck.Label>
    </div>
    <Form.Check className=" form-check-inline">
        <FormCheck.Input type="radio" name="bsradio1" id="radio4"
            disabled=""/>
        <FormCheck.Label htmlFor="radio3" className=" pl-2">Inactive - Disabled</FormCheck.Label>
    </Form.Check>
</div>
<div className="bd-example">
    <Form.Check className=" form-switch form-check-inline">
        <FormCheck.Input type="checkbox" id="switch1" />
        <FormCheck.Label className=" pl-2" htmlFor="switch1">Off Switch</FormCheck.Label>
    </Form.Check>
    <div className="form-check form-switch form-check-inline">
        <FormCheck.Input type="checkbox" id="switch2" defaultChecked />
        <FormCheck.Label className=" pl-2" htmlFor="switch2">On Switch</FormCheck.Label>
    </div>
    <div className="form-check form-switch form-check-inline">
        <input className="form-check-input" type="checkbox" id="switch3" disabled />
        <FormCheck.Label className=" pl-2" htmlFor="switch3">Disabled Switch</FormCheck.Label>
    </div>
    <div className="form-check form-switch form-check-inline">
        <input className="form-check-input form-check-inline" type="checkbox" id="switch4" defaultChecked disabled />
        <FormCheck.Label className=" pl-2" htmlFor="switch4"> Switch</FormCheck.Label>
    </div>
</div>
<div className="bd-example">
    <Form.Group>
        <Form.Label htmlFor="customRange1">Example range</Form.Label>
        {/* <input type="range" className="form-range w-100" id="customRange1"/> */}
        <Form.Range />
    </Form.Group>
    <Form.Group>
        <div className="slider"></div>
    </Form.Group>
    <Form.Group>
        <div className="slider slider-secondary"></div>
    </Form.Group>
    <Form.Group>
        <div className="slider slider-success"></div>
    </Form.Group>
    <Form.Group>
        <div className="slider slider-danger"></div>
    </Form.Group>
    <Form.Group>
        <div className="slider slider-warning"></div>
    </Form.Group>
    <Form.Group>
        <div className="slider slider-dark"></div>
    </Form.Group>
</div>
Validation
Documentation
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
<div className="bd-example">
    <Form as={Row} className=" g-3" >
        <Col md="4">
            <Form.Label htmlFor="validationServer01">First name</Form.Label>
            <Form.Control type="text" className=" is-valid" id="validationServer01" defaultValue="Mark" required/>
            <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Col>
        <Col md="4">
            <Form.Label htmlFor="validationServer02">Last name</Form.Label>
            <Form.Control type="text" className=" is-valid" id="validationServer02" defaultValue="Otto" required/>
                <Form.Control.Feedback type="valid">Looks good!</Form.Control.Feedback>
        </Col>
        <Col md="4">
            <Form.Label htmlFor="validationServerUsername">Username</Form.Label>
            <InputGroup hasValidation>
                <span className="input-group-text" id="inputGroupPrepend3">@</span>
                <Form.Control type="text" className=" is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required/>
                <Form.Control.Feedback type="invalid">
                    Please choose a username.
                </Form.Control.Feedback>
            </InputGroup>
        </Col>
        <Col md="6">
            <Form.Label htmlFor="validationServer03">City</Form.Label>
            <Form.Control type="text" className=" is-invalid" id="validationServer03" required/>
            <Form.Control.Feedback type="invalid">
                Please provide a valid city.
            </Form.Control.Feedback>
        </Col>
        <Col md="3">
            <Form.Label htmlFor="validationServer04">State</Form.Label>
            <Form.Select className=" is-invalid" id="validationServer04" required>
                <option defaultValue >Choose...</option>
                <option>...</option>
            </Form.Select>
            <Form.Control.Feedback type="invalid">
                Please select a valid state.
            </Form.Control.Feedback>
        </Col>
        <Col md="3">
            <Form.Label htmlFor="validationServer05">Zip</Form.Label>
            <Form.Control type="text" className=" is-invalid" id="validationServer05" required/>
            <Form.Control.Feedback type="invalid">
                Please provide a valid zip.
            </Form.Control.Feedback>
        </Col>
        <div className="col-12">
            <Form.Check>
                <Form.Check.Input className=" is-invalid" type="checkbox" defaultValue="" id="invalidCheck3" required/>
                <Form.Check.Label htmlFor="invalidCheck3">
                    Agree to terms and conditions
                </Form.Check.Label>
                <Form.Control.Feedback type="invalid">
                    You must agree before submitting.
                </Form.Control.Feedback>
            </Form.Check>
        </div>
        <div className="col-12">
            <button className="btn btn-primary" type="submit">Submit form</button>
        </div>
    </Form>
</div>

Contents

Typography
Documentation

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a lead paragraph. It stands out from regular paragraphs.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
  • This is a list item.
  • And another one.
  • But they're displayed inline.
<div className="bd-example">
    <p className="display-1">Display 1</p>
    <p className="display-2">Display 2</p>
    <p className="display-3">Display 3</p>
    <p className="display-4">Display 4</p>
    <p className="display-5">Display 5</p>
    <p className="display-6">Display 6</p>
</div>  
<div className="bd-example">
    <p className="h1">Heading 1</p>
    <p className="h2">Heading 2</p>
    <p className="h3">Heading 3</p>
    <p className="h4">Heading 4</p>
    <p className="h5">Heading 5</p>
    <p className="h6">Heading 6</p>
</div>
<div className="bd-example">
    <p className="lead">
        This is a lead paragraph. It stands out from regular paragraphs.
    </p>
</div>
<div className="bd-example">
    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <p><u>This line of text will render as underlined.</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>
</div>
<div className="bd-example">
    <blockquote className="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
    <footer className="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
</div>
<div className="bd-example">
    <ul className="list-unstyled">
        <li>This is a list.</li>
        <li>It appears completely unstyled.</li>
        <li>Structurally, it's still a list.</li>
        <li>However, this style only applies to immediate child elements.</li>
        <li>Nested lists:
            <ul>
                <li>are unaffected by this style</li>
                <li>will still show a bullet</li>
                <li>and have appropriate left margin</li>
            </ul>
        </li>
        <li>This may still come in handy in some situations.</li>
    </ul>
</div>
<div className="bd-example">
    <ul className="list-inline">
        <li className="list-inline-item">This is a list item.</li>
        <li className="list-inline-item">And another one.</li>
        <li className="list-inline-item">But they're displayed inline.</li>
    </ul>
</div>
Images
Documentation
PlaceholderResponsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera200x200
<div className="bd-example">
    <svg className="bd-placeholder-img bd-placeholder-img-lg img-fluid" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="40%" y="50%" fill="#dee2e6" dy=".3em">Responsive image</text></svg>
</div>
<div className="bd-example">
    <svg className="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="33%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
</div>
Tables
Documentation
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
ClassHeadingHeading
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<div className="bd-example table-responsive">
    <Table className="table-striped">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colSpan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </Table>
</div>
<div className="bd-example table-responsive">
    <Table className=" table-dark table-borderless">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td colSpan="2">Larry the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </Table>
</div>
<div className="bd-example table-responsive">
    <Table className="table table-hover">
        <thead>
            <tr>
                <th scope="col">Class</th>
                <th scope="col">Heading</th>
                <th scope="col">Heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Default</th>
                <td>Cell</td>
                <td>Cell</td>
            </tr>

            <tr className="table-primary">
                <th scope="row">Primary</th>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
            <tr className="table-secondary">
                <th scope="row">Secondary</th>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
            <tr className="table-success">
                <th scope="row">Success</th>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
            <tr className="table-danger">
                <th scope="row">Danger</th>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
            <tr className="table-warning">
                <th scope="row">Warning</th>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
            <tr className="table-info">
                <th scope="row">Info</th>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
            <tr className="table-light">
                <th scope="row">Light</th>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
            <tr className="table-dark">
                <th scope="row">Dark</th>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
        </tbody>
    </Table>
</div>
<div className="bd-example table-responsive">
    <Table className="table table-sm table-bordered">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td colSpan="2">Larry the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </Table>
</div>
Figures
Documentation
Placeholder400x300
A caption for the above image.
<div className="bd-example">
    <figure className="figure">
        <svg className="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="42%" y="50%" fill="#dee2e6" dy=".3em">400x300</text></svg>
        <figcaption className="figure-caption">A caption for the above image.</figcaption>
    </figure>
</div>