Basic Card Layout in Bootstrap

Bootstrap cards are flexible content containers that can include various types of content and can be customized to fit different design needs. Cards are versatile and can be used to display content such as images, text, and links in a structured manner.

1. Basic Card Structure

A basic card consists of several components:

• Card Container: The outer wrapper for the card.
• Card Header: An optional header section.
• Card Body: The main content area of the card.
• Card Footer: An optional footer section.

Classes:

• .card: The base class for the card container.
• .card-header: Adds a header section to the card.
• .card-body: Contains the main content of the card.
• .card-footer: Adds a footer section to the card.

Example:

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

• .card: The outer container of the card.
• .card-img-top: Adds an image at the top of the card.
• .card-body: Contains the title, text, and button.

2. Card Variants

Bootstrap provides several variants to enhance the appearance of cards.

a. Card with Image

• Usage: Display an image at the top or side of the card.

Example:

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Card content goes here.</p>
  </div>
</div>

• .card-img-top: Adds an image to the top of the card.

b. Card with Header and Footer

• Usage: Include header and footer sections to provide additional context or actions.

Example:

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Card content goes here.</p>
  </div>
  <div class="card-footer text-muted">
    Footer text
  </div>
</div>

• .card-header: Adds a header section to the card.
• .card-footer: Adds a footer section to the card.

c. Card Columns

• Usage: Arrange cards in a column layout for a grid-like appearance.

Example:

<div class="card-columns">
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">Some text inside the card.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Another Card Title</h5>
      <p class="card-text">Some text inside the card.</p>
    </div>
  </div>
  <!-- More cards -->
</div>

• .card-columns: Creates a column layout for cards with varying heights.

3. Card Styles and Customization

You can customize the appearance of cards using additional Bootstrap classes or custom CSS.

a. Card Color Variants

• Classes: .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark
• Usage: Apply background colors to the card.

Example:

<div class="card bg-primary text-white" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Primary Card</h5>
    <p class="card-text">Card with a primary background color.</p>
  </div>
</div>

• .bg-primary: Applies a primary background color to the card.
• .text-white: Changes text color to white for better contrast.

b. Card Alignment and Layout

• Classes: .text-center, .text-start, .text-end, .card-deck, .card-group
• Usage: Align text within the card or adjust card layout.

Example:

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Centered Card</h5>
    <p class="card-text">Card with centered text.</p>
  </div>
</div>

• .text-center: Centers the text within the card.

4. Card Images

Cards can include images with various placements and sizes.

a. Card Image Top

• Usage: Display an image at the top of the card.

Example:

<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 Title</h5>
    <p class="card-text">Some text inside the card.</p>
  </div>
</div>

• .card-img-top: Places an image at the top of the card.

b. Card Image Bottom

• Usage: Display an image at the bottom of the card.

Example:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some text inside the card.</p>
  </div>
  <img src="https://via.placeholder.com/150" class="card-img-bottom" alt="Card image">
</div>

• .card-img-bottom: Places an image at the bottom of the card.

Summary of Basic Card Layout in Bootstrap

• Basic Card Structure: Use .card, .card-header, .card-body, and .card-footer to build a card with optional header, body, and footer sections.
• Card Variants:
  • Image: Use .card-img-top or .card-img-bottom for images at the top or bottom.
  • Header and Footer: Add .card-header and .card-footer for additional content sections.
  • Columns: Use .card-columns for a column layout.
• Styles and Customization:
  • Color Variants: Apply background colors with .bg-* classes.
  • Alignment: Align text and adjust card layout with .text-center, .text-start, .text-end, and layout classes.
• Card Images: Include images with .card-img-top and .card-img-bottom for top and bottom placements.