Phoenix

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Basic Example

<div class="card" style="max-width:20rem;">
  <img class="card-img-top" src="../../assets/img/crane.png" alt="..." />
  <div class="card-body">
    <h5 class="card-title">Title goes here</h5>
    <p class="card-text">Here is the example of the Multiple Container Sortable feature of the </p>
    <button class="btn btn-primary">Go somewhere</button>
  </div>
</div>

Title goes here

Here is the example of the Multiple Container Sortable feature of the

Card with list

<div class="card p-3" style="max-width:20rem;">
  <a class="dropdown-item fw-bold text-warning" href="#!">
    <span class="fas fa-crown me-1"></span>
    <span>Go Pro</span>
  </a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#!">Set status</a>
  <a class="dropdown-item" href="#!">Profile & account</a>
  <a class="dropdown-item" href="#!">Feedback</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#!">Settings</a>
  <a class="dropdown-item" href="#!">Logout</a>
</div>

Image overlays

<div class="card text-white overflow-hidden" style="max-width:30rem;">
  <img class="card-img-top" src="../../assets/img/4.jpg" alt="..." />
  <div class="card-img-overlay d-flex align-items-end">
    <div>
      <h4 class="card-title text-white">Card title</h4>
      <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>
    </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.

Horizontal

<div class="card" style="max-width:32rem;">
  <div class="row g-0">
    <div class="col-md-4">
      <img class="img-fluid rounded-start" src="../../assets/img/1.jpg" alt="..." />
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <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

Card Groups

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="../../assets/img/4.jpg" alt="..." />
    <div class="card-body">
      <h4 class="card-title">First card title</h4>
      <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 45 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="../../assets/img/2.jpg" alt="..." />
    <div class="card-body">
      <h4 class="card-title">First card title</h4>
      <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 45 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="../../assets/img/3.jpg" alt="..." />
    <div class="card-body">
      <h4 class="card-title">First card title</h4>
      <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 45 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="../../assets/img/4.jpg" alt="..." />
    <div class="card-body">
      <h4 class="card-title">First card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in 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 45 mins ago</small>
      </p>
    </div>
  </div>
</div>

First 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 45 mins ago

First 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 45 mins ago

First 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 45 mins ago

First card title

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

Last updated 45 mins ago