Lesson Content

1. Bootstrap Cards

a. Overview

Definition: Cards are flexible content containers that include options for headers, footers, images, and a variety of content.
Features: Responsive, customizable, and can contain a mix of content types such as text, images, links, and buttons.

b. Basic Card Structure

Components: .card, .card-body, .card-title, .card-text, .card-img-top, .card-footer
Example:

html
Copy code
<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some example text to build on the card title.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

c. Card Variations

Card Decks: .card-deck for equal-height and responsive card layouts.
Card Groups: .card-group to link cards together with equal width and height.
Card Columns: .card-columns for masonry-like grid layouts (Note: Deprecated in Bootstrap 5).
Example: Card Deck

html
Copy code
<div class="card-deck">
  <div class="card">
    <img src="image1.jpg" class="card-img-top" alt="Card Image 1">
    <div class="card-body">
      <h5 class="card-title">Card Title 1</h5>
      <p class="card-text">Card content goes here.</p>
    </div>
  </div>
  <div class="card">
    <img src="image2.jpg" class="card-img-top" alt="Card Image 2">
    <div class="card-body">
      <h5 class="card-title">Card Title 2</h5>
      <p class="card-text">Card content goes here.</p>
    </div>
  </div>
  <div class="card">
    <img src="image3.jpg" class="card-img-top" alt="Card Image 3">
    <div class="card-body">
      <h5 class="card-title">Card Title 3</h5>
      <p class="card-text">Card content goes here.</p>
    </div>
  </div>
</div>

2. Bootstrap Modals

a. Overview

Definition: Modals are dialog boxes/popup windows that are displayed on top of the current page.
Features: Can contain forms, images, text, and other interactive elements; accessible and responsive.

b. Basic Modal Structure

Components: .modal, .modal-dialog, .modal-content, .modal-header, .modal-body, .modal-footer
Example:

html
Copy code
<!-- Button to Open Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal Structure -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Modal body content goes here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

c. Modal Variations

Scrollable Modals: Allow modal body content to scroll independently.

html
Copy code
<div class="modal fade" id="scrollModal" tabindex="-1" aria-labelledby="scrollModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <!-- Modal content -->
  </div>
</div>

Centered Modals: Vertically center the modal in the viewport.

html
Copy code
<div class="modal fade" id="centerModal" tabindex="-1" aria-labelledby="centerModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <!-- Modal content -->
  </div>
</div>

Large and Small Modals: Use .modal-lg or .modal-sm to adjust modal size.

html
Copy code
<div class="modal-dialog modal-lg">
  <!-- Large modal content -->
</div>

<div class="modal-dialog modal-sm">
  <!-- Small modal content -->
</div>

3. Combining Cards and Modals

a. Example: Card with Modal Trigger

Description: Create a card that includes a button to trigger a modal for more detailed information.
Example:

html
Copy code
<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some brief information about the content.</p>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cardModal">
      More Info
    </button>
  </div>
</div>

<!-- Modal Structure -->
<div class="modal fade" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="cardModalLabel">Detailed Information</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        More detailed content about the card goes here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Day 6: Bootstrap Cards and Modals