Alert in Bootstrap

Ethan Karla 479 28 Jul 2021

What is Alert in Bootstrap? Where has it been used?

Ask by Ethan Karla

Updated 28 Jul 2021

1 Answers

Anonymous User 29 Jul 2021

Alert in Bootstrap is used to show a message to the user. This can be achieved with Bootstrap's .alert classes. There are eighth contextual classes in Bootstrap that you can use to display different types of messages.

Let's take an example of alert in Bootstrap to understand it better:

<!doctype html>

<html lang='en'>

<head>

    <!-- Required meta tags -->

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <!-- Bootstrap CSS -->

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>

    <title>Hello, world!</title>

</head>

<body>

    <div class='container'>

        <div class='alert alert-primary' role='alert'>

            This is a primary alert—check it out!

        </div>

        <div class='alert alert-secondary' role='alert'>

            This is a secondary alert—check it out!

        </div>

        <div class='alert alert-success' role='alert'>

            This is a success alert—check it out!

        </div>

        <div class='alert alert-danger' role='alert'>

            This is a danger alert—check it out!

        </div>

        <div class='alert alert-warning' role='alert'>

            This is a warning alert—check it out!

        </div>

        <div class='alert alert-info' role='alert'>

            This is a info alert—check it out!

        </div>

        <div class='alert alert-light' role='alert'>

            This is a light alert—check it out!

        </div>

        <div class='alert alert-dark' role='alert'>

            This is a dark alert—check it out!

        </div>

    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->

    <!--

    <script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js' integrity='sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p' crossorigin='anonymous'></script>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js' integrity='sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF' crossorigin='anonymous'></script>

    -->

</body>

</html>