How To Remove Extra Right Margin When using Alert Dismissible

Posted By Bajarangi soft , Posted On 12-10-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:

<!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="#">
     BAJARANGI SOFT
    </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>

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:

<!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="#">
     BAJARANGI SOFT
    </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>

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:

<!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="#">
 BAJARANGI SOFT
    </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>