Bootstrap card

Bootstrap 5 Bootstrap card component

Responsive Bootstrap card built with Bootstrap 5. Enhance your web design with flexible, user-friendly cards for displaying content beautifully and efficiently.

Basic

Use the following simple card component with a title and a description:

Card title

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

Edit in sandbox 
        
            
              <div class="card">
                <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>
                  <button type="button" class="btn btn-primary" data-mdb-ripple-init>Button</button>
                </div>
              </div>
            
        
    
        
            
              // Initialization for ES Users
              import { Ripple, initMDB } from "mdb-ui-kit";

              initMDB({ Ripple });

Image

Use the following example of a card element with an image for blog posts, user cards, and many more:

Fissure in Sandstone
Card title

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

Button
Edit in sandbox 
        
            
              <div class="card">
                <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.webp" class="card-img-top" alt="Fissure in Sandstone"/>
                <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" data-mdb-ripple-init>Button</a>
                </div>
              </div>
            
        
    
        
            
            // Initialization for ES Users
            import { Ripple, initMDB } from "mdb-ui-kit";
          
            initMDB({ Ripple });

Image with ripple

To add a ripple effect and subtle hover effect you need to modify the HTML markup of the card image.

Beach Sunrise
Card title

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

Button
Edit in sandbox 
        
            
              <div class="card">
                <div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">
                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.webp" class="img-fluid"/>
                  <a href="#!">
                    <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                  </a>
                </div>
                <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" data-mdb-ripple-init>Button</a>
                </div>
              </div>
            
        
    
        
            
            // Initialization for ES Users
            import { Ripple, initMDB } from "mdb-ui-kit";
          
            initMDB({ Ripple });

Note: Some examples here have fixed card width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. To control the width of the card place it in the grid, use the sizing utilities, or set the width inline. You can learn more in the sizing section.