Card

css class description
card Defines a card.
card-header Specifies a header section of card. It can be <div> with content or single element such <h5>.
card-body Specifies a body section of card.
card-title Specifies a title of card inside the body section.
card-text Specifies the text for the card. Usually applied to the <p> element.
card-img-top Specifies an image cap, that can be placed on the top or bottom of card.
card-img Turns an image into a card background. Used in conjuction with the card-img-overlay class.
card-img-overlay Allows to overlay content on image (example).
card-link Specifies link inside card.
card-footer Specifies a footer section of card.
<div class="card border-secondary mb-3 mt-4" 
     style="max-width: 18rem;">
     <div class="card-header">Header</div>
     
     <img src="/images/flower_n_1.jpeg" 
       class="card-img-top" alt="rose">
    
    <div class="card-body">
        <h5 class="card-title">My 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>
        
        <p class="card-text">
            <small class="text-muted">Last 
        updated 3 mins ago</small></p>    
    </div>
    
    <div class="card-footer">
      some footer text
    </div>
</div>
Header
rose
My title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 3 mins ago

card with image overlays

<div 
     class="card border-secondary mb-3 mt-4 text-white" 
     style="max-width: 18rem;">

     <img src="/images/flower_n_1.jpeg" 
       class="card-img" alt="rose">
    
    <div class="card-img-overlay">
        <h5 class="card-title">My 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>  
    </div>
    
    <div class="card-footer text-muted">
      <small>Last updated 3 mins ago</small>
    </div>
</div>
rose
My title

Some quick example text to build on the card title and make up the bulk of the card's content.

horizontal card with

In following example card has horizontal orientation on medium screens and higher. On small screen card has vertical orientation.

<div class="card mb-3" 
style="max-width: 384px;">
<div class="row no-gutters align-items-center">
    
  <div class="col-md-4">
    <img src="/images/flower_n_1.jpeg" 
       class="card-img" 
       alt="rose">
    </div>
   
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">
           Card title</h5>
        <p class="card-text">
          This is a wider card 
          with supporting text below 
          as a natural lead-in to 
          additional content. 
          This content is 
          a little bit longer.</p>
        <p class="card-text">
          <small class="text-muted">Last 
            updated 3 mins ago</small>
        </p>
      </div>
    </div>
  </div>
</div>
rose
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago