How to show bootstrap alert after button click?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to show a bootstrap alert after a button click.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Define its class name
  • Add JavaScript in <script> tag

This article will guide you to adding alert after button click in Bootstrap with example.

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

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

Step 2: Includes bootstrap library

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

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Step 3: Define its class name

After that, create the show bootstrap alert after button click with a class name alert alert-success alert-dismissable.

    <div class="container">
        <h2>Open an Alert by clicking this button</h2>
        <button class="btn btn-info btn-sm'">Alert</button>
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Success! message sent successfully.
        </div>
    </div>

Step 4: Add JavaScript in <script> tag

Add the following JavaScript after the <body> tag after the <script> tag to specify the button click and show an alert.

        $(document).ready(function () {
            $('button').click(function () {
                $('.alert').show()
            })
        });

Example.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .alert {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Open an Alert by clicking this button</h2>
        <button class="btn btn-info btn-sm'">Alert</button>
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Success! message sent successfully.
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.alert').show()
            })
        });
    </script>
</body>
</html>

Check the output of the above code example.

Bootstrap, Open, Alert, Button

Bootstrap, Open, Alert, By, Button

All the best 👍