0
0
Bootsrapmarkup~5 mins

Close button component in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

A close button lets users easily close or dismiss parts of a webpage, like alerts or modals.

When you want users to close a popup message or alert.
To let users dismiss a notification without reloading the page.
To close a modal window or dialog box.
To remove a tag or item from a list on the page.
Syntax
Bootsrap
<button type="button" class="btn-close" aria-label="Close"></button>
The btn-close class styles the button with an X icon.
The aria-label="Close" helps screen readers understand the button's purpose.
Examples
Basic close button with default size and color.
Bootsrap
<button type="button" class="btn-close" aria-label="Close"></button>
Close button with white color, useful on dark backgrounds.
Bootsrap
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
Close button that is disabled and cannot be clicked.
Bootsrap
<button type="button" class="btn-close" aria-label="Close" disabled></button>
Sample Program

This example shows a yellow warning alert with a close button on the right. Clicking the button will hide the alert smoothly.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Close Button Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="alert alert-warning alert-dismissible fade show m-3" role="alert">
    <strong>Warning!</strong> This is a warning alert with a close button.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Always include aria-label="Close" for accessibility so screen readers can describe the button.

The close button works best inside components that support dismissal, like alerts or modals.

Use btn-close-white on dark backgrounds to keep the button visible.

Summary

The close button is a small clickable X to dismiss content.

Use the btn-close class and add aria-label="Close" for accessibility.

It works well with Bootstrap alerts and modals for a smooth user experience.