Bootsrap alert auto close example

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To make an alert auto close, put the setTimeout() method to close the alert after a specified time. it will show the alert auto close on a page.

In this tutorial, learn how to create a bootstrap alert auto close example.

All modern web application uses alerts to show messages to the user. These alerts have a close button to close them or can be closed automatically using Twitter Bootstrap. In this post, we will create automatically closing of alerts using twitter Bootstrap.

Table of contents

  • Includes bootstrap library
  • Include the code in body
  • Add JavaScript in <script> tag

Syntax:

setTimeout(function, delay)

Note: Delay is defined in milliseconds. 1 second is equal to 1000 milliseconds.

Step 1: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <!-- Including jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
    </script>

    <!-- Including Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>

Step 2: Include the code in body

Include the code below in <body> to accept time from the user.

  <div id="alert" class="alert alert-danger">
        This alert will automatically
        close in 5 seconds.
    </div>

Step 3: Add JavaScript in <script> tag

Add the following JavaScript in <script> tag after the <body> tag to specify alert auto close.

    <script type="text/javascript">
        setTimeout(function () {

            // Closing the alert
            $('#alert').alert('close');
        }, 5000);
    </script>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html>

<head>
    <title> Bootstrap </title>

    <!-- Including Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <!-- Including jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
    </script>

    <!-- Including Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>

<body>
    <h3>Auto close the alert</h3>

    <!-- Showing alert -->
    <div id="alert" class="alert alert-danger">
        This alert will automatically
        close in 5 seconds.
    </div>

    <script type="text/javascript">
        setTimeout(function () {

            // Closing the alert
            $('#alert').alert('close');
        }, 5000);
    </script>
</body>

</html>

Check the output of the above code example.

In this example, alert is accessed in script using the id and then alert is closed after 5 seconds.

Bootstrap, Auto, Close, Alert

Bootstrap, Auto, Close, Alert

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts