Bootstrap Close Button - Creating close button in Bootstrap



Bootstrap Close Button

  • It provide an option to dismiss or close a component with .btn-close. Default styling is limited, but highly customizable.
  • Modify the Sass variables to replace the default background-image. Ensure to include text for screen readers, as we’ve done with aria-label.
how-to-create-close-button-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <button type="button" class="btn-close" aria-label="Close"></button>
  </body>
</html>

Output

bootstrap-close-button

Bootstrap Disabled Close Button

  • Disabled close buttons change their opacity. We’ve also applied pointer-events: none and user-select: none to preventing hover and active states from triggering.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <button type="button" class="btn-close" disabled="" aria-label="Close"></button>
  </body>
</html>

Output

bootstrap-disabled-close-button

Bootstrap White Close Button

  • Change the default .btn-close to be white with the .btn-close-white class. This class uses the filter property to invert the background-image.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bg-dark">
    <button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
    <button type="button" class="btn-close btn-close-white" disabled="" aria-label="Close"></button>
  </body>
</html>

Output

bootstrap-white-close-button

Related Searches to Bootstrap Close Button - Creating close button in Bootstrap