1. Bootstrap Cards

A Bootstrap card is a flexible content container with built-in styling for images, text, buttons, and headers.

Step 1: Basic Card Structure

• A card uses .card as the main class.

• Inside it, use .card-body for content.

👉 Example: Basic Card

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</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:

• .card defines the container.

• .card-title styles the title.

• .card-text adds a paragraph.

• .btn-primary adds a button inside the card.

Step 2: Card with Image

• You can add images using .card-img-top or .card-img-bottom.

👉 Example: Card with Image

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">This card includes an image at the top.</p>
  </div>
</div>

Step 3: Card with Footer

• Use .card-footer for extra information at the bottom.

👉 Example: Card with Footer

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card with Footer</h5>
    <p class="card-text">This card includes a footer at the bottom.</p>
  </div>
  <div class="card-footer text-muted">Last updated 2 hours ago</div>
</div>

Step 4: Card with Multiple Sections

• Cards can have headers and different content blocks.

👉 Example: Card with Header & List Group

<div class="card" style="width: 18rem;">
  <div class="card-header">Featured</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">First Item</li>
    <li class="list-group-item">Second Item</li>
    <li class="list-group-item">Third Item</li>
  </ul>
</div>

Step 5: Horizontal Cards

• Cards can be arranged in a row using Flexbox.

👉 Example: Horizontal Card

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/100" class="img-fluid rounded-start" alt="Image">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Horizontal Card</h5>
        <p class="card-text">This card is arranged in a row layout.</p>
      </div>
    </div>
  </div>
</div>

2. Bootstrap Components

Step 6: Accordion (Collapsible Content)

• Use Bootstrap’s accordion for collapsible sections.

👉 Example: Accordion

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Section 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">This is the first section.</div>
    </div>
  </div>
</div>

✅ Explanation:

• .accordion creates collapsible content sections.

• .accordion-button toggles the content.

Step 7: Modal (Popup Window)

• Bootstrap modals are used for pop-up dialogs.

👉 Example: Modal Popup

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Open Modal
</button>

<div class="modal fade" id="exampleModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">This is a Bootstrap modal example.</div>
    </div>
  </div>
</div>

Step 8: Carousel (Image Slider)

• Bootstrap carousels allow slideshows with images.

👉 Example: Image Carousel

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/400" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/400" class="d-block w-100" alt="Slide 2">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

✅ Explanation:

• .carousel sets up the slider.

• .carousel-inner holds images.

• .carousel-control-prev and .carousel-control-next add navigation buttons.

Conclusion

Bootstrap Cards & Components help in creating modern UI layouts with flexible content containers, modals, accordions, and carousels. They enhance user experience by organizing content effectively. 🚀