Dashboard
Applications
Pages
UI Elements
Shaira Diaz

Premium Member

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Basic Styling

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.

...
Card title

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

Go somewhere 
<div class="card">
  <img src="../assets/img/img2.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title text-dark">Card title</h5>
    <p class="card-text">Some quick example...</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>



Content Types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

This is some text within a card body. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Card title
Card subtitle

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

Card link Another link 
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example ...</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>



Kitchen Sink

Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

...
Card title

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

  • An item
  • A second item
  • A third item
Card link Another link 
<div class="card">
  <img src="../assets/img/img2.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title text-dark">Card title</h5>
    <p class="card-text">Some quick example...</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>



Header & Footer

Add an optional header and/or footer within a card.

Featured

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

Like Comment Share 
<div class="card">
  <div class="card-header tx-medium">Featured</div>
  <div class="card-body">
    <p class="card-text">With supporting...</p>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <p class="card-text">With supporting...</p>
  </div>
  <div class="card-footer">
    <a href="">Like</a>
    <a href="" class="ms-2">Comment</a>
    <a href="" class="ms-2">Share</a>
  </div>
</div>



Card Navigation

Add some navigation to a card’s header (or block) with Bootstrap’s nav components.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting...</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>



Image Overlay

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

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

<div class="card bg-dark text-white border-0">
  <img src="../assets/img/img2.jpg" class="card-img" alt="...">
  <div class="card-img-overlay">
    <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">Last updated 3 mins ago</p>
  </div>
</div>



Background Color

Use text and background utilities to change the appearance of a card.

Header
Primary card title

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

Header
Secondary card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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

<div class="card card-primary">...</div>
<div class="card card-secondary">...</div>
<div class="card card-success">...</div>
<div class="card card-danger">...</div>
<div class="card card-warning">...</div>
<div class="card card-info">...</div>
<div class="card card-light">...</div>
<div class="card card-dark">...</div>



Card Groups

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

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

...
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider ...</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting...</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider ...</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>



Grid Cards

Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

<div class="row row-cols-1 row-cols-md-2 g-2">
  <div class="col">
    <div class="card">
      <img src="../assets/img/img2.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer...</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="../assets/img/img2.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer...</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="../assets/img/img2.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer...</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="../assets/img/img2.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer...</p>
      </div>
    </div>
  </div>
</div>



© 2023. Dashbyte. All Rights Reserved. Created by: Themepixels