Lesson Content

1. Bootstrap Alerts

a. Overview

Definition: Alerts are contextual feedback messages for user actions, providing information about the state of the application.
Features: Different styles for success, danger, warning, info, and more; can be dismissible.

b. Basic Alert Structure

Components: .alert, .alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-light, .alert-dark
Example:

html
Copy code
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>

<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>

c. Dismissible Alerts

Classes and Attributes: .alert-dismissible, .fade, .show, .close, data-dismiss="alert"
Example:

html
Copy code
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> This is a warning alert.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

2. Bootstrap Badges

a. Overview

Definition: Badges are small count and labeling components used to highlight new or unread items, or to provide additional information.
Features: Can be used with various elements like buttons, navs, and links.

b. Basic Badge Structure

Components: .badge, .badge-primary, .badge-secondary, .badge-success, .badge-danger, .badge-warning, .badge-info, .badge-light, .badge-dark
Example:

html
Copy code
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>

c. Badges with Links and Buttons

Example:

html
Copy code
<a href="#" class="btn btn-secondary">
  Notifications <span class="badge badge-light">4</span>
</a>

<button type="button" class="btn btn-info">
  Messages <span class="badge badge-light">10</span>
</button>

3. Bootstrap Progress Bars

a. Overview

Definition: Progress bars are indicators used to show the completion status of a task or process.
Features: Can be animated, striped, and use contextual colors to indicate different states.

b. Basic Progress Bar Structure

Components: .progress, .progress-bar
Example:

html
Copy code
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    25%
  </div>
</div>

c. Progress Bar Variations

Striped Progress Bars: .progress-bar-striped
Animated Progress Bars: .progress-bar-animated
Contextual Colors: .bg-success, .bg-info, .bg-warning, .bg-danger
Example: Striped and Animated Progress Bar with Contextual Color

html
Copy code
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" 
       role="progressbar" 
       style="width: 60%;" 
       aria-valuenow="60" 
       aria-valuemin="0" 
       aria-valuemax="100">
    60%
  </div>
</div>

4. Combining Alerts, Badges, and Progress Bars

a. Practical Application: User Notifications Section

Example:

html
Copy code
<div class="container mt-4">
  <!-- Alert with Badge -->
  <div class="alert alert-info alert-dismissible fade show" role="alert">
    <strong>New Messages:</strong> You have <span class="badge badge-primary">5</span> new messages.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  
  <!-- Progress Bar -->
  <h4>Task Progress</h4>
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
         role="progressbar" 
         style="width: 70%;" 
         aria-valuenow="70" 
         aria-valuemin="0" 
         aria-valuemax="100">
      70%
    </div>
  </div>
</div>

b. Example: Badge on Navbar Link

html
Copy code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">BrandName</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarFeedback">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarFeedback">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">
          Notifications <span class="badge badge-danger">3</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

Day 8: Bootstrap Alerts, Badges, and Progress Bars