Hackforge Academy

Explanation

Bootstrap Buttons provide predefined styles for user interactions such as submitting forms, navigating pages, and triggering actions. Different contextual classes represent various actions like primary, success, warning, and danger. Buttons can also have different sizes and outline styles.

Code:

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-outline-secondary">Outline</button>

Explanation

Bootstrap Cards are flexible explanation containers used to display information such as products, profiles, blog posts, or dashboards. Cards can contain images, titles, text, buttons, headers, and footers.

Code:

<div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/300x180" class="card-img-top" alt="Image">
    <div class="card-body">
        <h5 class="card-title">Bootstrap Card</h5>
        <p class="card-text">This is a simple Bootstrap card example.</p>
        <a href="#" class="btn btn-primary">Read More</a>
    </div>
</div>

Explanation

Bootstrap Alerts display important messages such as success notifications, warnings, errors, or informational messages. Alerts can also be dismissible using Bootstrap JavaScript.

Code:

<div class="alert alert-success" role="alert">
    Data saved successfully!
</div>

<div class="alert alert-danger alert-dismissible fade show" role="alert">
    Something went wrong.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Explanation

Bootstrap Badges are small count or status indicators commonly used for notifications, labels, unread messages, or item counts. Badges can be attached to headings, buttons, and navigation items.

Code:

<h3>Messages <span class="badge bg-primary">12</span></h3>

<button class="btn btn-danger">
    Notifications <span class="badge bg-light text-dark">5</span>
</button>

Explanation

Bootstrap components can be combined to build attractive user interfaces. For example, a card may contain badges, buttons, and alerts to create a complete dashboard or product layout with minimal custom CSS.

Code:

<div class="card p-3 shadow">
    <h5>
        Product Name
        <span class="badge bg-success">New</span>
    </h5>
    <div class="alert alert-info mt-2">
        Limited-time offer available.
    </div>
    <button class="btn btn-primary">Buy Now</button>
</div>