Bootstrap 5 | Close button
Bootstrap 5 provides a new component which is a Close button which can be used for dismissing content like modals and alerts. It can be included in the webpage using bootstrap.js or bootstrap.min.js. This component can be combined with models, alerts, and popovers. Disabled close buttons have pointer-events: none; applied to, preventing hover and active states from triggering.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Bootstrap 5 | Close button
</ title >
< link rel = "stylesheet" href =
integrity =
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin = "anonymous" >
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align: center;" >
< div class = "container mt-3" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
Close icon
< button type = "button" class = "close"
aria-label = "Close" >
< span aria-hidden = "true" >×</ span >
</ button >
< br />
Close disabled icon
< button type = "button" class = "close"
aria-label = "Close" disabled>
< span aria-hidden = "true" >×</ span >
</ button >
</ div >
</ body >
</ html >
|
Output:
Reference: https://v5.getbootstrap.com/docs/5.0/components/close-button/
Last Updated :
05 May, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...