Alert in Bootstrap

Ethan Karla 409 28 Jul 2021

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

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

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>

Output :

Hope this forum will help you.

Happy Coding!

forum

Alert in Bootstrap

Can you answer this question?

1 Answers