Bootstrap tutorial

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

some footer text

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.

Last updated 3 mins ago

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