Bootstrap Cards

You've successfully navigated through creating buttons, forms, modals, and accordions with Bootstrap. Now, let's expand your toolkit even further by exploring Bootstrap Cards. Cards are versatile and elegant components used to display content in a structured format, making your web pages more visually appealing and easier to navigate.

In this lesson, you'll master the creation and customization of Bootstrap Cards. We'll focus on understanding how to structure a card, add images, text, and buttons to create a cohesive and attractive element. By the end of this lesson, you'll be able to design a card similar to this:

<div class="card" style="width: 18rem;">
    <img src="https://codesignal-assets.s3.amazonaws.com/uploads/1714856323584/tiandl_adorable_corgi_puppy_natural_light_film_camera_shot_dayl_5f6f5500-4ed2-46f3-947d-c7717270d757.png" class="card-img-top" alt="Corgi puppy lounging in sunlight">
    <div class="card-body">
        <h5 class="card-title">Sunbathing Puppy</h5>
        <p class="card-text">Enjoying the warmth and light, a corgi finds comfort in the rays of the sun.</p>
        <a href="#" class="btn btn-primary">Learn More</a>
    </div>
</div>

Here are the key parts of the above code snippet:

1. Card Container (<div class="card">): This is the Bootstrap class used to create the main container for the card. The style="width: 18rem;" sets the width of the card.
2. Card Image (<img class="card-img-top">): This Bootstrap class is used to display an image at the top of the card. The alt attribute provides alternative text for the image.
3. Card Body (<div class="card-body">): This section uses the Bootstrap class card-body to contain the main content of the card, including:
   • Card Title (<h5 class="card-title">): This Bootstrap class is used to display the title of the card.
   • Card Text (<p class="card-text">): This Bootstrap class provides additional information or description.
   • Card Button (<a class="btn btn-primary">): This Bootstrap class adds a button to the card, typically used to link to more information.

Bootstrap Cards offer a versatile range of content options, making it easy to create visually appealing and functional cards. Let's explore some examples:

1. Images:

   XML

   <img src="image-url.jpg" class="card-img-top" alt="Description">

   This uses the card-img-top class to place an image at the top of the card, providing a visually engaging start.

2. Text and Titles:

   XML

   <h5 class="card-title">Card Title</h5>
   <p class="card-text">Quick example text to build on the card title.</p>

   Use the card-title and card-text classes to add a catchy title and descriptive text, giving context and information to your card.

3. Links:

   XML

   <a href="#" class="card-link">Card link</a>
   <a href="#" class="card-link">Another link</a>

   The card-link class is used to include links for additional navigation or resources, making your card interactive.

4. List Groups:

   XML

   <ul class="list-group list-group-flush">
       <li class="list-group-item">Cras justo odio</li>
       <li class="list-group-item">Dapibus ac facilisis in</li>
       <li class="list-group-item">Vestibulum at eros</li>
   </ul>

   Add a list group using the list-group and list-group-flush classes to organize information neatly within the card, perfect for lists and itemized content.