Bootsrapmarkup~30 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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!

Need a hint?

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

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!
  >

Need a hint?

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

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!

Need a hint?

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