forum

home / developersection / forums / alert in bootstrap

Ask Question

Alert in Bootstrap

Ethan Karla 306 28-Jul-2021

What is Alert in Bootstrap? Where has it been used?
bootstrap bootstrap 
Updated on 28-Jul-2021
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.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

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 : 

Alert in Bootstrap

Hope this forum will help you.

Happy Coding!

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy