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

Last Updated : 01 Jun, 2020

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

<!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= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity= 
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous"> 
  
    <!-- JavaScript Plugins -->
    <!-- jQuery first, then Popper.js, 
         then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity= 
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity= 
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        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>

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

<!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= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity= 
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous"> 
  
    <!-- JavaScript Plugins -->
    <!-- jQuery first, then Popper.js, 
         then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity= 
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity= 
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        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>

Output:

Note: After 7 seconds alert will dismiss automatically.

Alert-dismissible: The alert–dismissible 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

<!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= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity= 
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous"> 
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js,  
         then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity= 
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity= 
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        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>