Bootstrap 5 Close button White variant

Bootstrap 5 Close button is used to add more user access and enhance user experience to a website and its components. Generally, the default version of this button is dark/black and it goes universally with all the colors except the dark/black colored background or component which goes well and looks distinctive over this dark or black background.

Bootstrap 5 Close button white variant Class:

btn-close-white: This class is used to indicate that the close button is supposed to be white.

Bootstrap 5 Close button white variant used attributes:

disabled(optional): This attribute is optional and if added to the close button, the button is disabled and it doesn't work anymore.

Syntax:

<button type="button" class="btn-close btn-close-white">
...
</button>

Example 1: The code example below demonstrates a dismissing alert which is in dark color with a white close button.

HTML

<!doctype html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>
</head>

<body>
    <h1 class="m-4 text-success">GeeksforGeeks</h1>
    <h4 class="m-4">Bootstrap 5 Close button White variant</h4>
    <div class="container">
        <div class="alert alert-dark bg-secondary 
                    alert-dismissible fade show" 
             role="alert">
            This is a simple success alert. Go to
            <a href=
"https://www.geeksforgeeks.org/bootstrap/bootstrap-5-alerts/" class="alert-link">
                this link</a> to learn basics of bootstrap alerts.
            <button type="button" 
                    class="btn-close btn-close-white" 
                    data-bs-dismiss="alert" 
                    aria-label="Close">
            </button>
        </div>
        <p>
            Above there is a Dismissing Alert which is in dark color. <br>
            It has a white close button which can be
            used to dismiss the alert.
        </p>
    </div>
</body>

</html>

Output:

Example 2: The code example below demonstrates a simple modal which is in dark color with a white close button:

HTML

<!doctype html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>
</head>
  
<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="m-4">
        Bootstrap 5 Close button White variant
    </h4>
    <div class="container">
        <button type="button" class="btn btn-success"
                data-bs-toggle="modal" 
                data-bs-target="#darkModal">
            Launch Dark modal
        </button>
        <div class="modal fade" id="darkModal" 
              tabindex="-1" 
              aria-labelledby="darkModalLabel" 
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content  bg-dark text-light">
                    <div class="modal-header">
                        <h5 class="modal-title" id="darkModalLabel">
                            This is a dark Modal</h5>
                        <button type="button" 
                                class="btn-close btn-close-white" 
                                data-bs-dismiss="modal" 
                                aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                      This modal has a white close button.
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/close-button/#white-variant

Bootstrap 5 Close button White variant

Explore