How to Remove extra right margin when using alert-dismissible ?

By using the alert JavaScript plugin, it’s possible to dismiss any alert inline. 

  • Make sure, you have loaded the alert plugin, or the compiled Bootstrap JavaScript.
  • It requires util.js , if you are building JavaScript from source. The compiled version includes this.
  • We can add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.
  • On the dismiss button, add the data-dismiss=”alert” attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.
  • You can add the .fade and .show classes to animate alerts when dismissing them.

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
        initial-scale=1, shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous">
  
    <!-- JavaScript Plugins -->
    <!-- jQuery first, then Popper.js,
         then Bootstrap JS -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous">
    </script>
      
    <title>
        How to Remove extra right margin 
        when using alert-dismissible?
    </title>
</head>
  
<body>
    <div class="container">
        <a class="navbar-brand text-success" href="#">
            Geeksforgeeks
        </a>
        <div class="alert alert-warning alert-dismissible
                fade show" role="alert">
            <b>Hello Everyone!</b
            click on 'x' symbol to close
              
            <button type="button" class="close" 
                data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

Using JavaScript triggers: Enable dismissal of an alert via JavaScript:



$('.alert').alert()

Or with data attributes on a button within the alert, as demonstrated above:

<button type="button" class="close" 
        data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

Note that closing an alert will remove it from the DOM.

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1, shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous">
  
    <!-- JavaScript Plugins -->
    <!-- jQuery first, then Popper.js,
         then Bootstrap JS -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous">
    </script>
      
    <style type="text/css">
        .fade {
            -webkit-transition-duration: 7s;
  
            /* Safari */
            transition-duration: 7s;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <a class="navbar-brand text-success"
                href="#">
            Geeksforgeeks
        </a>
        <h2>
            Alert dismiss using 
            javascript trigger
        </h2>
        <div class="alert alert-warning fade show">
            <b>Hello Everyone!</b
            click on 'x' symbol to close
        </div>
    </div>
  
    <!-- JavaScript trigger-->
    <script>
        $(document).ready(function () {
            $(".alert").alert('close');
        }); 
    </script>
</body>
  
</html>

chevron_right


Output:

Note: After 7 seconds alert will dismiss automatically.

Alert-dismissible: The alertdismissible class adds extra padding to the right of the alert and positions the .close button. On the dismiss button, add the data-dismiss=”alert” attribute, which triggers the JavaScript functionality. Be sure to use the element with it for proper behavior across all devices.

How to remove extra right margin when using alert-dismissible?

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1, shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous">
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, 
         then Bootstrap JS -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous">
    </script>
      
    <title>
        Remove extra right margin 
        using alert-dismissible
    </title>
  
    <style type="text/css">
        .alert-dismissible {
            margin-right: 100px;
  
            /* Reset pixel value */
            padding-right: 0px;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <a class="navbar-brand text-success" href="#">
            Geeksforgeeks
        </a>
        <div class="alert alert-warning alert-dismissible
                fade show" role="alert">
            <b>Hello Everyone!</b
            click on 'x' symbol to close
  
            <button type="button" class="close" 
                data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.