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 =
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
Share your thoughts in the comments
Please Login to comment...