Open In App

Bootstrap 5 Close button White variant

Improve
Improve
Like Article
Like
Save
Share
Report

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=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
            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=
                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=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
            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 



Last Updated : 03 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads