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.

Code example

<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

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

Code example

<div 
     class="card border-secondary mb-3 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>

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.

Code example

<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>

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

Web frontend

Web backend

JVM

JS

Programming

Mobiles

Graphics

Others

Bootstrap tutorial

Card

My title

card with image overlays

My title

horizontal card with

Card title