software-development-company-logo

Tag: and Alerts

  • Lesson 10: Buttons, Badges, and Alerts

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to use Bootstrap’s buttons, badges, and alert components to create interactive and visually appealing UI elements.

    🔹 1. Introduction to Bootstrap Buttons, Badges & Alerts

    Bootstrap provides pre-styled UI components that make it easy to create interactive elements.

    💡 Why Use Bootstrap Buttons, Badges & Alerts?
    ✔️ Consistent styling across all browsers.
    ✔️ Customizable with utility classes.
    ✔️ Interactive elements that enhance the user experience.

    🔹 2. Bootstrap Buttons

    1️⃣ Basic Button Styles

    Bootstrap buttons are styled using the .btn class along with a color class (.btn-primary, .btn-secondary, etc.).

    ✅ Example: Different Button Variants

    html
    <div class="container">
    <button class="btn btn-primary">Primary Button</button>
    <button class="btn btn-secondary">Secondary Button</button>
    <button class="btn btn-success">Success Button</button>
    <button class="btn btn-danger">Danger Button</button>
    <button class="btn btn-warning">Warning Button</button>
    <button class="btn btn-info">Info Button</button>
    <button class="btn btn-dark">Dark Button</button>
    <button class="btn btn-light">Light Button</button>
    </div>

    🔹 What happens?

    • Buttons get predefined colors matching Bootstrap’s theme.

    2️⃣ Outline Buttons

    Use .btn-outline-* classes to create bordered buttons with transparent backgrounds.

    ✅ Example: Outline Buttons

    html
    <div class="container">
    <button class="btn btn-outline-primary">Primary</button>
    <button class="btn btn-outline-secondary">Secondary</button>
    <button class="btn btn-outline-success">Success</button>
    </div>

    🔹 What happens?

    • The buttons only have borders and take the background color on hover.

    3️⃣ Button Sizes

    Use .btn-lg for larger buttons and .btn-sm for smaller buttons.

    ✅ Example: Button Sizes

    html
    <button class="btn btn-primary btn-lg">Large Button</button>
    <button class="btn btn-primary btn-sm">Small Button</button>

    4️⃣ Block-Level Buttons

    Make a button full width using .d-block w-100.

    ✅ Example: Full-Width Button

    html
    <button class="btn btn-danger d-block w-100">Full Width Button</button>

    5️⃣ Button Groups

    Group multiple buttons together using .btn-group.

    ✅ Example: Button Group

    html
    <div class="btn-group">
    <button class="btn btn-primary">Left</button>
    <button class="btn btn-primary">Middle</button>
    <button class="btn btn-primary">Right</button>
    </div>

    🔹 3. Bootstrap Badges

    Badges display notifications, labels, or status indicators.

    1️⃣ Basic Badges

    Use .badge to create a badge.

    ✅ Example: Adding a Badge

    html
    <h1>Notifications <span class="badge bg-danger">5</span></h1>

    🔹 What happens?

    • A red badge appears next to “Notifications” showing 5.

    2️⃣ Pill-Shaped Badges

    Use .rounded-pill to create rounded badges.

    ✅ Example: Pill Badges

    html
    <span class="badge bg-success rounded-pill">Active</span>

    🔹 What happens?

    • The badge is pill-shaped instead of square.

    3️⃣ Badges in Buttons

    You can place badges inside buttons.

    ✅ Example: Button with Badge

    html
    <button class="btn btn-primary">
    Messages <span class="badge bg-light text-dark">3</span>
    </button>

    🔹 What happens?

    • A notification counter appears inside the button.

    🔹 4. Bootstrap Alerts

    Alerts are used to display important messages, warnings, or success notifications.

    1️⃣ Basic Alert Styles

    Use .alert with color classes (.alert-primary, .alert-success, etc.).

    ✅ Example: Different Alerts

    html
    <div class="alert alert-primary">This is a primary alert</div>
    <div class="alert alert-success">This is a success alert</div>
    <div class="alert alert-danger">This is a danger alert</div>

    2️⃣ Dismissible Alerts

    Make alerts closable by adding .alert-dismissible and a close button.

    ✅ Example: Dismissible Alert

    html
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
    Warning Alert! Click the button to close.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    🔹 What happens?

    • The alert has a close button, and clicking it hides the alert.

    3️⃣ Alerts with Links

    Make alert messages interactive by adding links.

    ✅ Example: Alert with Link

    html
    <div class="alert alert-info">
    New update available! <a href="#" class="alert-link">Click here to update.</a>
    </div>

    4️⃣ Colored Alerts with Icons

    Bootstrap 5.3 allows icons inside alerts.

    ✅ Example: Alert with Icon

    html
    <div class="alert alert-success d-flex align-items-center">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img">
    <use xlink:href="#check-circle-fill"/>
    </svg>
    <div>Successfully completed!</div>
    </div>

    🔹 What happens?

    • An icon appears inside the alert.

    📝 Lesson Recap Quiz

    🎯 Test your understanding of Bootstrap buttons, badges, and alerts.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What class is used to create a Bootstrap button?
    a) .button
    b) .btn
    c) .button-primary
    d) .bootstrap-button

    ✅ Correct Answer: b) .btn

    2️⃣ How do you create an outline button in Bootstrap?
    a) .btn-outline
    b) .btn-border
    c) .btn-outline-primary
    d) .btn-bordered

    ✅ Correct Answer: c) .btn-outline-primary

    3️⃣ What class adds a dismissible close button to an alert?
    a) .alert-close
    b) .dismiss-button
    c) .alert-dismissible
    d) .alert-closeable

    ✅ Correct Answer: c) .alert-dismissible

    📌 True or False

    4️⃣ Badges can be used inside buttons.
    ✅ Answer: True

    5️⃣ .btn-group allows multiple buttons to be grouped together.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Create a button with a badge that shows the number of unread messages.
    ✅ Add a dismissible success alert with a close button.
    ✅ Create three different button types (.btn-primary, .btn-outline-danger, .btn-lg).
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Bootstrap buttons (.btn, .btn-outline-*) provide interactive elements.
    ✅ Badges (.badge) display counters, labels, and statuses.
    ✅ Alerts (.alert, .alert-dismissible) show notifications and warnings.
    ✅ Bootstrap allows buttons, alerts, and badges to be easily styled and customized.