Day 27 Progress - Delving into Bootstrap Components

Today, I focused on expanding my knowledge of Bootstrap by exploring several key components. Here's a breakdown of what I learned along with sample code snippets:

1. Badge Component

The badge component is a handy tool for adding context-specific labels to various elements. Badges are often used to indicate counts or statuses, such as unread notifications or new messages.

<h2>Followers</h2>
<button type="button" class="btn btn-primary">
  Messages <span class="badge bg-secondary">1M+</span>
</button>

This code creates a button with a badge indicating that there are 1M+ unread followers.

2. Alert Component

Bootstrap’s alert component is essential for creating dismissible messages that grab users' attention. Alerts are perfect for displaying important information like warnings, success messages, or error notifications.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Data Error</strong> Please check your inputs.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

This code creates a dismissible warning alert that can be closed by the user.

3. Button Group

The button group component allows for the seamless grouping of buttons, providing a cleaner and more organized user interface.

<div class="btn-group">
    <button class="btn btn-outline-primary">one</button>
    <button class="btn btn-outline-secondary">two </button>
    <button class="btn btn-outline-dark">three</button>
    <button class="btn btn-outline-alert">four</button>
</div>

This code creates a group of four buttons aligned side by side.

4. Navbar Component

The navbar component is one of the most critical parts of any web application, providing a responsive and navigable header for users.

<h2>BoostStrap Demo</h2>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <a class="navbar-brand" href="#">Anime Realm</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Recommendations</a>
            </li>
        </ul>
    </div>
</nav>

This code creates a responsive navigation bar for a website named "Anime Realm," featuring links to Home, About Us, and Recommendations pages.