Close button component in Bootsrap - Mini Project: Build & Apply

Bootstrap Close Button Component

📖 Scenario: You are building a simple alert box on a webpage that users can close by clicking a close button. This is a common feature in websites to show messages that can be dismissed.

🎯 Goal: Create a Bootstrap alert box with a close button that users can click to hide the alert.

📋 What You'll Learn

Use Bootstrap 5 classes for styling the alert and close button

Create an alert box with the text 'This is an alert message!'

Add a close button inside the alert box using the Bootstrap close button component

Ensure the close button has the correct data-bs-dismiss attribute to close the alert

Make sure the alert box and close button are accessible with proper aria-label

💡 Why This Matters

🌍 Real World

Alert boxes with close buttons are used on websites to show important messages that users can dismiss, such as notifications, warnings, or confirmations.

💼 Career

Knowing how to use Bootstrap components like alerts and close buttons is useful for front-end web developers to build user-friendly and responsive interfaces quickly.

1

Create the alert box container

Write the HTML code to create a <div> element with Bootstrap classes alert and alert-warning. Inside this <div>, add the text This is an alert message!.

Bootsrap

Hint

Use a <div> with classes alert and alert-warning and add the alert text inside.

2

Add the close button element

Inside the existing <div class="alert alert-warning" role="alert">, add a <button> element with classes btn-close and float-end. Set the type attribute to button.

Bootsrap

  This is an alert message!
  

Hint

Add a <button> with class btn-close and float-end inside the alert <div>.

3

Add the dismiss attribute and aria-label

Modify the close button to include the attribute data-bs-dismiss="alert" and add aria-label="Close" for accessibility.

Bootsrap

  This is an alert message!
  >

Hint

Add data-bs-dismiss="alert" and aria-label="Close" to the close button for functionality and accessibility.

4

Add Bootstrap CSS and JS links

Add the Bootstrap 5 CSS link inside the <head> and the Bootstrap 5 JavaScript bundle script before the closing </body> tag to enable the close button functionality.

Bootsrap

  
  
  Bootstrap Alert
  
  
    This is an alert message!
    
  


  

Hint

Use the official Bootstrap 5 CDN links for CSS in the <head> and JS bundle before </body>.

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