Close button component in Bootsrap

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>

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.

Practice

1. What is the main purpose of the Bootstrap btn-close component?

easy

A. To create a small button that closes or dismisses content like alerts or modals

B. To open new modal windows on click

C. To submit forms with a close icon

D. To style text with a close symbol

Solution

1. Step 1: Understand the role of btn-close

   The btn-close class is designed to create a small button with an X icon.

2. Step 2: Identify its common use

   This button is used to close or dismiss UI elements like alerts or modals.

3. Final Answer:

   To create a small button that closes or dismisses content like alerts or modals -> Option A

4. Quick Check:

   Close button = dismiss content [OK]

Hint: Close button means dismiss content, not open or submit [OK]

Common Mistakes:

• Thinking it opens modals instead of closing
• Confusing with form submit buttons
• Assuming it styles text only

2. Which of the following is the correct HTML syntax to create a Bootstrap close button with accessibility support?

easy

A.

B. Close

C.

D. X

Solution

1. Step 1: Check the required element and classes

   The close button should be a button element with class btn-close.

2. Step 2: Verify accessibility attributes

   It must have aria-label="Close" for screen readers.

3. Final Answer:

   <button type="button" class="btn-close" aria-label="Close"></button> -> Option A

4. Quick Check:

   Button + btn-close + aria-label = correct syntax [OK]

Hint: Use <button> with btn-close and aria-label="Close" [OK]

Common Mistakes:

• Using <div> or <span> instead of <button>
• Missing aria-label attribute
• Adding text inside the button instead of empty

3. What will be the visible result in the browser when you use this code?

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Warning! Something went wrong.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

medium

A. A red error alert with a close button that does nothing

B. A plain text message with no button visible

C. A yellow warning alert with a small X button on the right to close it

D. An alert box with a submit button labeled 'Close'

Solution

1. Step 1: Identify alert classes and behavior

   The alert alert-warning alert-dismissible fade show classes create a yellow warning alert that can be dismissed.

2. Step 2: Understand the close button role

   The btn-close button with data-bs-dismiss="alert" will show a small X that closes the alert on click.

3. Final Answer:

   A yellow warning alert with a small X button on the right to close it -> Option C

4. Quick Check:

   Alert-warning + btn-close = dismissible yellow alert [OK]

Hint: Alert-warning + btn-close = yellow alert with close X [OK]

Common Mistakes:

• Confusing alert-warning with alert-danger color
• Thinking close button does nothing without JS
• Expecting text inside the close button

4. You wrote this close button code but the button does not appear:

<button class="btn-close" aria-label="Close">X</button>

What is the main issue?

medium

A. The class should be btn-close-icon instead of btn-close

B. Missing type="button" attribute causes it not to render

C. The aria-label attribute must be 'close-button' instead of 'Close'

D. Including text 'X' inside the button breaks the icon display

Solution

1. Step 1: Check button content rules

   The Bootstrap close button uses an empty button with no inner text to show the X icon via CSS.

2. Step 2: Understand effect of adding text

   Adding 'X' inside overrides the icon and breaks the styling, so the button looks wrong or missing.

3. Final Answer:

   Including text 'X' inside the button breaks the icon display -> Option D

4. Quick Check:

   Close button must be empty inside [OK]

Hint: Close button must be empty inside, no text allowed [OK]

Common Mistakes:

• Assuming type="button" is required to show button
• Changing aria-label text unnecessarily
• Using wrong class name for close button

5. You want to create a modal with a close button in the top-right corner using Bootstrap. Which code snippet correctly adds an accessible close button inside the modal header?

hard

A.
Modal title

B.
Modal title

C.
Modal title

D.
Modal title
X

Solution

1. Step 1: Confirm correct element and classes for modal close

   The close button inside a modal header must be a button with class btn-close and data-bs-dismiss="modal" to close the modal.

2. Step 2: Check accessibility attributes

   It must have aria-label="Close" so screen readers understand its purpose.

3. Final Answer:

   Modal header with button type="button", class btn-close, data-bs-dismiss="modal", and aria-label="Close" -> Option B

4. Quick Check:

   Modal close button = btn-close + data-bs-dismiss + aria-label [OK]

Hint: Modal close button needs data-bs-dismiss="modal" and aria-label [OK]

Common Mistakes:

• Adding text inside the button breaks icon
• Using <span> instead of <button>
• Missing data-bs-dismiss attribute