Documentation

HTML
Vue
Laravel
React
Tailwind
Angular
CodeIgniter

Requirements
File Structure

Basic
React

Favicon
Loading Transitions
Logo
Changing Fonts
Layout Configure
Sidebar and Header

Disable Form
Sizing
Input Group
Alternate Input
Floating Label
Alternate Float Label
Toggle Button
Validation

Tyography
Images
Tables
Figures

AOS Animation
Datepicker
Circle Progress
CounterUp
NoUiSlider
Data Table
Source & Credits
Upgrade Guide
Change Log

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight variants.

<Alert variant="primary">
    <div className="alert-primary " role="alert">
    This is a <b> primary </b> alert—check it out!
    </div>
</Alert>
<Alert variant="secondary">
    <div className="alert-secondary" role="alert">
    This is a <b> secondary </b> alert—check it out!
    </div>
</Alert>
<Alert variant="success">
    <div className="alert-success" role="alert">
    This is a <b> success </b> alert—check it out!   
    </div>
</Alert>
<Alert variant="danger">    
    <div className="alert-danger" role="alert">
    This is a <b> danger </b> alert—check it out!
    </div>
</Alert>
<Alert variant="warning">
    <div className="alert-warning" role="alert">
    This is a <b> warning </b> alert—check it out!
    </div>
</Alert>
<Alert variant="info">
    <div className="alert-info" role="alert">
    This is a <b> info </b> alert—check it out!
    </div>
</Alert>
<Alert variant="light">
    <div className="alert-light" role="alert">
    This is a <b> light </b> alert—check it out!     
    </div>
</Alert>
<Alert variant="dark">
    <div className="alert-dark mb-0 " role="alert">
    This is a <b> dark </b> alert—check it out!
    </div>
</Alert>

With icon

Use the required Bootstrap icon (e.g SVG icon) to create alerts with icons.

<Alert className="alert-warning  mb-0" role="alert">
    <svg width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.94118 10.7474V20.7444C5.94118 21.0758 5.81103 21.3936 5.57937 21.628C5.3477 21.8623 5.0335 21.994 4.70588 21.994H2.23529C1.90767 21.994 1.59347 21.8623 1.36181 21.628C1.13015 21.3936 1 21.0758 1 20.7444V11.997C1 11.6656 1.13015 11.3477 1.36181 11.1134C1.59347 10.879 1.90767 10.7474 2.23529 10.7474H5.94118ZM5.94118 10.7474C7.25166 10.7474 8.50847 10.2207 9.43512 9.28334C10.3618 8.34594 10.8824 7.07456 10.8824 5.74887V4.49925C10.8824 3.83641 11.1426 3.20071 11.606 2.73201C12.0693 2.26331 12.6977 2 13.3529 2C14.0082 2 14.6366 2.26331 15.0999 2.73201C15.5632 3.20071 15.8235 3.83641 15.8235 4.49925V10.7474H19.5294C20.1847 10.7474 20.8131 11.0107 21.2764 11.4794C21.7397 11.9481 22 12.5838 22 13.2466L20.7647 19.4947C20.5871 20.2613 20.25 20.9196 19.8045 21.3704C19.3589 21.8211 18.8288 22.04 18.2941 21.994H9.64706C8.6642 21.994 7.72159 21.599 7.0266 20.896C6.33162 20.1929 5.94118 19.2394 5.94118 18.2451" stroke="currentColor" />
    </svg>
    <strong>Warning!</strong> This is a warning alert—check it out that has an icon too!
</Alert>

Dismissing

Use the Button and .alert-dismissible class for dismissing and also add data-bs-dismiss="alert" attribute on the button which triggers the JavaScript functionality. also use .fade and .show classes for animate the alert.

<TabPane id="alerts-disimissible-component" className="tab-pane tab-example-result fade active show" role="tabpanel" aria-labelledby="alerts-disimissible-component-tab">
    <Alert className="alert-success alert-dismissible fade show mb-0" role="alert">
        <svg width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.94118 10.7474V20.7444C5.94118 21.0758 5.81103 21.3936 5.57937 21.628C5.3477 21.8623 5.0335 21.994 4.70588 21.994H2.23529C1.90767 21.994 1.59347 21.8623 1.36181 21.628C1.13015 21.3936 1 21.0758 1 20.7444V11.997C1 11.6656 1.13015 11.3477 1.36181 11.1134C1.59347 10.879 1.90767 10.7474 2.23529 10.7474H5.94118ZM5.94118 10.7474C7.25166 10.7474 8.50847 10.2207 9.43512 9.28334C10.3618 8.34594 10.8824 7.07456 10.8824 5.74887V4.49925C10.8824 3.83641 11.1426 3.20071 11.606 2.73201C12.0693 2.26331 12.6977 2 13.3529 2C14.0082 2 14.6366 2.26331 15.0999 2.73201C15.5632 3.20071 15.8235 3.83641 15.8235 4.49925V10.7474H19.5294C20.1847 10.7474 20.8131 11.0107 21.2764 11.4794C21.7397 11.9481 22 12.5838 22 13.2466L20.7647 19.4947C20.5871 20.2613 20.25 20.9196 19.8045 21.3704C19.3589 21.8211 18.8288 22.04 18.2941 21.994H9.64706C8.6642 21.994 7.72159 21.599 7.0266 20.896C6.33162 20.1929 5.94118 19.2394 5.94118 18.2451" stroke="currentColor" />
        </svg>
        <strong>Success!</strong> This is a success alert—check it out!
        <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </Alert>
</TabPane>

Solid

Use the required class variant (e.g. alert-solid) for solid property.

<div id="alerts-disimissible-component">
    <Alert className="alert-solid alert-warning alert-dismissible fade show  mb-0" role="alert">
        <svg width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.94118 10.7474V20.7444C5.94118 21.0758 5.81103 21.3936 5.57937 21.628C5.3477 21.8623 5.0335 21.994 4.70588 21.994H2.23529C1.90767 21.994 1.59347 21.8623 1.36181 21.628C1.13015 21.3936 1 21.0758 1 20.7444V11.997C1 11.6656 1.13015 11.3477 1.36181 11.1134C1.59347 10.879 1.90767 10.7474 2.23529 10.7474H5.94118ZM5.94118 10.7474C7.25166 10.7474 8.50847 10.2207 9.43512 9.28334C10.3618 8.34594 10.8824 7.07456 10.8824 5.74887V4.49925C10.8824 3.83641 11.1426 3.20071 11.606 2.73201C12.0693 2.26331 12.6977 2 13.3529 2C14.0082 2 14.6366 2.26331 15.0999 2.73201C15.5632 3.20071 15.8235 3.83641 15.8235 4.49925V10.7474H19.5294C20.1847 10.7474 20.8131 11.0107 21.2764 11.4794C21.7397 11.9481 22 12.5838 22 13.2466L20.7647 19.4947C20.5871 20.2613 20.25 20.9196 19.8045 21.3704C19.3589 21.8211 18.8288 22.04 18.2941 21.994H9.64706C8.6642 21.994 7.72159 21.599 7.0266 20.896C6.33162 20.1929 5.94118 19.2394 5.94118 18.2451" stroke="currentColor" />
        </svg>
        <strong>Success!</strong> This is a success alert—check it out!
        <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </Alert>
</div>

Border

Use the required class variant (e.g. alert-left) for border.

<Alert className="alert-left alert-danger  alert-dismissible fade show mb-0" role="alert">
    <svg width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.94118 10.7474V20.7444C5.94118 21.0758 5.81103 21.3936 5.57937 21.628C5.3477 21.8623 5.0335 21.994 4.70588 21.994H2.23529C1.90767 21.994 1.59347 21.8623 1.36181 21.628C1.13015 21.3936 1 21.0758 1 20.7444V11.997C1 11.6656 1.13015 11.3477 1.36181 11.1134C1.59347 10.879 1.90767 10.7474 2.23529 10.7474H5.94118ZM5.94118 10.7474C7.25166 10.7474 8.50847 10.2207 9.43512 9.28334C10.3618 8.34594 10.8824 7.07456 10.8824 5.74887V4.49925C10.8824 3.83641 11.1426 3.20071 11.606 2.73201C12.0693 2.26331 12.6977 2 13.3529 2C14.0082 2 14.6366 2.26331 15.0999 2.73201C15.5632 3.20071 15.8235 3.83641 15.8235 4.49925V10.7474H19.5294C20.1847 10.7474 20.8131 11.0107 21.2764 11.4794C21.7397 11.9481 22 12.5838 22 13.2466L20.7647 19.4947C20.5871 20.2613 20.25 20.9196 19.8045 21.3704C19.3589 21.8211 18.8288 22.04 18.2941 21.994H9.64706C8.6642 21.994 7.72159 21.599 7.0266 20.896C6.33162 20.1929 5.94118 19.2394 5.94118 18.2451" stroke="currentColor"/>
    </svg>
    <strong>Success!</strong> This is a success alert—check it out!
    <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</Alert>