Bootstrap cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and great display options.

It is hard to think of a better way of displaying your content to users other than by cards. Some of the biggest players like Facebook or Google are well aware of that, as you might have noticed in almost all their products.

Cards provide you with clarity, clean content categorisation and attractive form of presenting it to the users.

MDB enhances Bootstrap cards with characteristic Material Design features, such as slight shadows, depth, cascading or waves effects. Apart from that, it enriches it with additional optional animations, social icons, avatars and various other effects not available in a native Bootstrap.


Basic example

Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.

Card image cap

Card title

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

Button
import React from 'react';
import { Button, Card, CardBody, CardImage, CardTitle, CardText } from 'mdbreact';

class CardExample extends React.Component {
  render() {
    return (
      <Card>
        <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" />
        <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
            <Button href="#">Button</Button>
        </CardBody>
    </Card>
    )
  }

            

Waves effect

Card image cap

Card title

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

Button
import React from 'react';
import { Button, Card, CardBody, CardImage, CardTitle, CardText } from 'mdbreact';

class CardExample extends React.Component {
  render() {
    return (
      <Card>
        <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" waves />
        <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
            <Button href="#">Button</Button>
        </CardBody>
    </Card>
    )
  }

            

Cascading cards MDB Pro component

Cards have rich customization options. Add cascade prop to achieve cascading effect, or wide / narrow for the image to have different width than the CardBody.

Wider

Alice Mayer

Photographer

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Narrower

Culinary

Cheat day inspirations

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button

Regular

Billy Cullen

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

                            
<Card wide>
    <CardImage cascade className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" />
    <CardBody cascade>
        <CardTitle>Card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
        <Button href="#">Button</Button>
    </CardBody>
</Card>
<Card narrow>
    <CardImage cascade className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" />
    <CardBody cascade>
        <CardTitle>Card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
        <Button href="#">Button</Button>
    </CardBody>
</Card>
<Card cascade>
    <CardImage cascade className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" />
    <CardBody cascade>
        <CardTitle>Card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
        <Button href="#">Button</Button>
    </CardBody>
</Card>
                            
                            

Cascading panels

Mattonit

The Boar

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Title of the news

26.07.2017

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum.

Read more

Marta

Deserve for her own card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.


    
<Card cascade>
    <CardImage cascade tag="div">
        <div className="view gradient-card-header blue-gradient">
            <h2 className="h2-responsive">Heading</h2>
            <p>Subheading</p>
        </div>
    </CardImage>
    <CardBody cascade>
          <CardTitle>Card title</CardTitle>
          <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
          <Button href="#">Button</Button>
    </CardBody>
</Card>
    
    

Reversed cascade

My adventure

Photography

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

    
<Card reverse>
    <CardImage cascade className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" />
    <CardBody cascade>
        <CardTitle>Card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
        <Button href="#">Button</Button>
    </CardBody>
</Card>
    
    

Action button & footer MDB Pro component

Card title


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

                        
<Card cascade>
    <CardImage cascade className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" />
    <Button floating tag="a" className="ml-auto mr-4 lighten-3 mdb-color" action><Fa icon="chevron-right"></Fa></Button>
    <CardBody cascade>
        <CardTitle>Card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
        <Button href="#">Button</Button>
    </CardBody>
    <div className="rounded-bottom mdb-color lighten-3 text-center pt-3">
        <ul className="list-unstyled list-inline font-small">
            <li className="list-inline-item pr-2 white-text"><Fa icon="clock-o"></Fa> 05/10/2015</li>
            <li className="list-inline-item pr-2"><a href="#" className="white-text"><Fa icon="comments-o"></Fa>12</a></li>
            <li className="list-inline-item pr-2"><a href="#" className="white-text"><Fa icon="facebook"> </Fa>21</a></li>
            <li className="list-inline-item"><a href="#" className="white-text"><Fa icon="twitter"> </Fa>5</a></li>
        </ul>
    </div>
</Card>
                        
                        

Flat buttons MDB Pro component

Light version

Card title


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

Read more
<Card>
  <CardImage top src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28131%29.jpg" overlay="white-slight" hover waves alt="Card image cap"/>
  <CardBody>
    <a className="activator waves-effect waves-light mr-4"><Fa icon="share-alt"></Fa></a>
    <CardTitle>Card Title</CardTitle>
    <hr />
    <CardText>Some quick example text to build on the card title and make up the bulk of the card&apos;s content.</CardText>
    <a href="#!" className="black-text d-flex justify-content-end"><h5>Read more <Fa icon="angle-double-right"></Fa></h5></a>
  </CardBody>
</Card>

Dark version

Card title


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

Read more
<Card>
  <CardImage top src="https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2821%29.jpg" overlay="white-slight" hover waves alt="Card image cap"/>
  <CardBody className="elegant-color white-text rounded-bottom">
    <a className="activator waves-effect waves-light mr-4"><Fa icon="share-alt"></Fa></a>
    <CardTitle>Card Title</CardTitle>
    <hr className="hr-light" />
    <CardText className="white-text">Some quick example text to build on the card title and make up the bulk of the card&apos;s content.</CardText>
    <a href="#!" className="black-text d-flex justify-content-end"><h5 className="white-text">Read more <Fa icon="angle-double-right"></Fa></h5></a>
  </CardBody>
</Card>

Testimonial card MDB Pro component

To change a background color use one of over 300 color classes from our palette.

woman avatar

Anna Doe


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci

woman avatar

Martha Smith


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci

<Card testimonial>
  <CardUp className="indigo lighten-1" />
  <Avatar className="mx-auto white">
    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg" />
  </Avatar>
  <CardBody>
    <h4 className="card-title">Anna Doe</h4>
    <hr />
    <p><Fa icon="quote-left"></Fa> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
  </CardBody>
</Card>

Image overlay MDB Pro component

Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
Software

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
<Card className="card-image" style={{backgroundImage: "url('https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg')"}}>
  <div className="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
    <div>
      <h5 className="pink-text"><Fa icon="pie-chart" /> Marketing</h5>
      <CardTitle tag="h3" className="pt-2"><strong>This is card title</strong></CardTitle>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
          optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
          Odit sed qui, dolorum!</p>
      <Button color="pink"><Fa icon="clone left" /> View project</Button>
    </div>
  </div>
</Card>
<Card className="card-image" style={{backgroundImage: "url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg')"}}>
  <div className="text-white text-center d-flex align-items-center rgba-indigo-strong py-5 px-4">
    <div>
      <h5 className="orange-text"><Fa icon="desktop" /> Software</h5>
      <CardTitle tag="h3" className="pt-2"><strong>This is card title</strong></CardTitle>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
          optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
          Odit sed qui, dolorum!</p>
      <Button color="deep-orange"><Fa icon="clone left" /> View project</Button>
    </div>
  </div>
</Card>

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

Card title

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

Card title

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

Card title

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

<CardGroup>

  <Card>
    <CardImage src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg" alt="Card image cap" top hover overlay="white-slight"/>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
      <Button color="primary">read more</Button>
    </CardBody>
  </Card>

  <Card>
    <CardImage src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" alt="Card image cap" top hover overlay="white-slight"/>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
      <Button color="primary">read more</Button>
    </CardBody>
  </Card>

  <Card>
    <CardImage src="https://mdbootstrap.com/img/Photos/Others/images/77.jpg" alt="Card image cap" top hover overlay="white-slight"/>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
      <Button color="primary">read more</Button>
    </CardBody>
  </Card>

</CardGroup>

Card decks

Need a set of equal width and height cards that aren’t attached to one another? Use deck prop.

Card title

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

Card title

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

Card title

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

<CardGroup deck>

  <Card>
    <CardImage src="https://mdbootstrap.com/img/Photos/Others/images/16.jpg" alt="Card image cap" top hover overlay="white-slight"/>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
      <Button color="light-blue" size="md">read more</Button>
    </CardBody>
  </Card>

  <Card>
    <CardImage src="https://mdbootstrap.com/img/Photos/Others/images/14.jpg" alt="Card image cap" top hover overlay="white-slight"/>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
      <Button color="light-blue" size="md">read more</Button>
    </CardBody>
  </Card>

  <Card>
    <CardImage src="https://mdbootstrap.com/img/Photos/Others/images/15.jpg" alt="Card image cap" top hover overlay="white-slight"/>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
      <Button color="light-blue" size="md">read more</Button>
    </CardBody>
  </Card>

</CardGroup>

Flipping cardMDB Pro component

Bootstrap flipping card is a card animation that gives an element effect of flipping to the other side upon the interaction.

Check out the example below:

Image with a photo of clouds.
Sample avatar image.

Marie Johnson

Web developer

Click here to rotate

About me


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?


Click here to rotate back
<FlippingCard flipped={this.state.flipped} className="text-center h-100 w-100" style={{ maxWidth: '22rem' }}>
    <Card className="face front">
      <CardUp>
        <img  className="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/photo7.jpg" alt="a photo of a house facade" />
      </CardUp>
      <Avatar className="mx-auto white" circle >
      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" className="rounded-circle"/>
    </Avatar>
      <CardBody>
        <h4 className="font-weight-bold mb-3">Marie Johnson</h4>
        <p className="font-weight-bold blue-text">Web developer</p>
        <a className="rotate-btn" data-card="card-1" onClick={this.handleFlipping}><Fa icon="repeat"/> Click here to rotate</a>
      </CardBody>
  </Card>
  <Card className="face back">
    <CardBody>
      <h4 className="font-weight-bold">About me</h4>
      <hr/>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?
      </p>
      <hr/>
      <ul className="list-inline py-2">
        <li className="list-inline-item"><a className="p-2 fa-lg fb-ic"><Fa icon="facebook"/></a></li>
        <li className="list-inline-item"><a className="p-2 fa-lg tw-ic"><Fa icon="twitter"/></a></li>
        <li className="list-inline-item"><a className="p-2 fa-lg gplus-ic"><Fa icon="google-plus"/></a></li>
        <li className="list-inline-item"><a className="p-2 fa-lg li-ic"><Fa icon="linkedin"/></a></li>
      </ul>
      <a className="rotate-btn" data-card="card-1" onClick={this.handleFlipping}><Fa icon="undo"/> Click here to rotate back</a>
    </CardBody>
  </Card>
</FlippingCard>