Bootstrap 4 Cards Tweet

Bootstrap 4 Cards provide a flexible and extensible container with options for header, footer, a wide variety of contents, contextual backgrounds and powerful display options.

Built with flexbox, they offer huge range of control and customization options. Cards don't have a defined width, so, they will fill their parent container by default.

Example

<div class="col-sm-4"> 
  <div class="card">
    <div class="card-header">
      Card Example
    </div>
    <img src="web-design.jpg" class="card-img-top" alt="web design banner">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="card-link">Link Text</a>
    </div>
    <div class="card-footer text-muted">
      End of Card
    </div>    
  </div>
</div>

Result

Classes of Card Explained

• card - adds border, background and border radius to the content.
• card-header - adds a header to the card with border, border radius, background color and padding.
• card-img-top - adds a light border radius on the top corners of the image and force the image width to 100%. You can place the image tag below card body to make it appear below the text contents.
• card-body - adds 1.25rem padding on all sides.
• card-title - adds margin bottom to the title.
• card-subtitle - adds margin top to the subtitle.
• card-link - removes the text decoration on hover. You can replace it with a button class though.
• card-footer - adds a footer to the card with border, border radius, background color and padding.

Card List Group

You can create a list group inside a card with great ease. Simply add class list-group-flush along with the list-group class.

<div class="row">
  <div class="col-sm-4">
    <div class="card">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Lorem ipsum dolor sit amet</li>
        <li class="list-group-item">Consectetur adipisicing elit</li>
        <li class="list-group-item">Sed do eiusmod</li>
      </ul>
    </div>
  </div>
</div>

Result

Image Overlay

You can use the image as background for card content by simply replacing card-body class with card-img-overlay. You might need to add additional css depending upon the image though.

<div class="col-sm-4"> 
  <div class="card">
    <img src="web-design.jpg" class="card-img-top" alt="web design banner">
    <div class="card-img-overlay">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-primary text-white">Link Text</a>
    </div>    
  </div>
</div>

Result

Contextual Cards

Add background, text and border utilities to customize cards easily.

<div class="col-sm-4"> 
  <div class="card bg-warning">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>
    </div>    
  </div>
</div>

Result

Card Layouts

Bootstrap 4 includes a couple of options to define the layout of series of cards which are not responsive as of date though.

Card Group

Class card-group allows you to align multiple cards as a single unit attached and with equal width and height.

<div class="card-group">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>    	
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>    	
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>    	
    </div>
  </div>	
</div>

Result

Card Deck

Class card-deck allows you to add multiple cards with equal width and height that aren't attached to each others.

<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>    	
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>    	
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>    	
    </div>
  </div>	
</div>

Result

Card Column

Class card-columns can be used to create a masonry view of cards.

<div class="card-columns">
  <div class="card bg-primary">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>    	
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>    	
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>    	
    </div>
  </div>
  <div class="card border-danger">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>    	
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>    	
    </div>
  </div>
  <div class="card bg-dark text-white">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
      <a href="#" class="btn btn-success text-white">Link Text</a>    	
    </div>
  </div>	
</div>

Result