Thursday, March 28, 2024
HomejQueryHow you can Create Bootstrap 5 Alerts: Defined with 5 Examples

How you can Create Bootstrap 5 Alerts: Defined with 5 Examples


<!DOCTYPE html>

 

<html lang=“en”>

 

<head>

 

<meta charset=“utf-8”>

 

<meta title=“viewport” content material=“width=device-width, initial-scale=1”>

 

<hyperlink href=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=“stylesheet”>

 

<script src=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js”></script>

 

</head>

 

<physique>

 

<div class=“m-4”>

 

    <!– Main Dismiss Alert –>

 

    <div class=“alert alert-primary alert-dismissible fade present”>

 

        <sturdy>Main!</sturdy> alert with dismiss choice.

 

        <button kind=“button” class=“btn-close” data-bs-dismiss=“alert”></button>

 

    </div>

 

    <!– Success Alert –>

 

    <div class=“alert alert-secondary alert-dismissible fade present”>

 

        <sturdy>Secondary!</sturdy> alert with dismiss choice.

 

        <button kind=“button” class=“btn-close” data-bs-dismiss=“alert”></button>

 

    </div>

 

    <!– Success Alert –>

 

    <div class=“alert alert-danger alert-dismissible fade present”>

 

        <sturdy>Hazard!</sturdy> alert with dismiss choice.

 

        <button kind=“button” class=“btn-close” data-bs-dismiss=“alert”></button>

 

    </div>

 

    <!– Success Alert –>

 

    <div class=“alert alert-light alert-dismissible fade present”>

 

        <sturdy>Gentle!</sturdy> alert with dismiss choice.

 

        <button kind=“button” class=“btn-close” data-bs-dismiss=“alert”></button>

 

    </div>           

 

 

 

 

    <!– Success Alert –>

 

    <div class=“alert alert-success alert-dismissible fade present”>

 

        <sturdy>Success!</sturdy> alert with dismiss choice.

 

        <button kind=“button” class=“btn-close” data-bs-dismiss=“alert”></button>

 

    </div>

 

 

 

 

    <!– Error Alert –>

 

    <div class=“alert alert-danger alert-dismissible fade present”>

 

        <sturdy>Error!</sturdy> alert with dismiss choice.

 

        <button kind=“button” class=“btn-close” data-bs-dismiss=“alert”></button>

 

    </div>

 

 

 

 

    <!– Warning Alert –>

 

    <div class=“alert alert-warning alert-dismissible fade present”>

 

        <sturdy>Warning!</sturdy> alert with dismiss choice.

 

        <button kind=“button” class=“btn-close” data-bs-dismiss=“alert”></button>

 

    </div>

 

 

 

 

    <!– Data Alert –>

 

    <div class=“alert alert-info alert-dismissible fade present”>

 

        <sturdy>Data!</sturdy> alert with dismiss choice.

 

        <button kind=“button” class=“btn-close” data-bs-dismiss=“alert”></button>

 

    </div>

 

</div>

 

</physique>

 

</html>

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments