Bootsrapmarkup~30 mins

Dismissible alerts in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Dismissible Alerts with Bootstrap

📖 Scenario: You are building a simple webpage that shows alert messages to users. These alerts can be closed by clicking a button, so they disappear from the page.

🎯 Goal: Create a webpage with a Bootstrap alert box that the user can dismiss by clicking a close button.

📋 What You'll Learn

Use Bootstrap 5 alert component

Create an alert with the text 'Warning! This is a dismissible alert.'

Add a close button that removes the alert when clicked

Ensure the alert uses the Bootstrap classes for styling and dismiss functionality

Include the necessary Bootstrap CSS and JS links

💡 Why This Matters

🌍 Real World

Dismissible alerts are common on websites to show messages like warnings, errors, or confirmations that users can close to keep the interface clean.

💼 Career

Knowing how to use Bootstrap alerts helps you build user-friendly interfaces quickly, a valuable skill for front-end web development jobs.

Progress0 / 4 steps

Create the basic HTML structure with Bootstrap CSS link

Create a basic HTML5 page with lang="en" in the <html> tag. Inside the <head>, add the Bootstrap 5 CSS link: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css. Add an empty <body> section.

Bootsrap

Need a hint?

Remember to add the Bootstrap CSS link inside the <head> section.

Add a Bootstrap alert div with dismissible classes

Inside the <body>, add a <div> with classes alert alert-warning alert-dismissible fade show. Set its role attribute to alert. Inside this div, add the text Warning! This is a dismissible alert..

Bootsrap




    
    
    
    Dismissible Alert

Need a hint?

Use the Bootstrap alert classes and set the role attribute to 'alert'.

Add the close button inside the alert div

Inside the alert <div>, after the text, add a <button> with type button, class btn-close, and attribute data-bs-dismiss="alert". Also add aria-label="Close" for accessibility.

Bootsrap




    
    
    
    Dismissible Alert


    
        Warning! This is a dismissible alert.

Need a hint?

The close button uses the btn-close class and data-bs-dismiss="alert" attribute.

Add Bootstrap JavaScript bundle for dismiss functionality

Before the closing </body> tag, add a <script> tag that loads the Bootstrap 5 JavaScript bundle from https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js. This enables the alert to be dismissed when the close button is clicked.

Bootsrap




    
    
    
    Dismissible Alert


    
        Warning! This is a dismissible alert.

Need a hint?

The Bootstrap JavaScript bundle is needed for the dismiss button to work. Add it just before the closing </body> tag.