Cards

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

Bootstrap Documentation

Examples

In Bootstrap 4 card is a very powerful ui component. by the help of our utility class you can make unlimited card block. we are giving you few example. Please read Bootstrap documentation to get a clear and concise idea about card.

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. This is easily customized with our various sizing options.

...
Card title

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

Go somewhere
...
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 is a wider card with supporting text below as a natural

John Doe
23 Min ago 
 <div class="row">
    <div class="col-lg-4">
      <div class="card">
        <img src="../assets/img/blog/Union7@2x.jpg" class="card-img-top" alt="...">
        <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">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card">
        <img src="../assets/img/blog/Union8@2x.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <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"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card">
        <img src="../assets/img/blog/Union9@2x.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural</p>
        </div>
        <div class="card-footer">
          <div class="d-flex justify-content-between align-items-center">
            <div class="media align-items-center">
              <div class="avatar avatar-sm">
                <img class="avatar__img" src="../assets/img/avatars/43.jpg" alt="">
              </div>
              <div class="media-body pl-2">
                <span class="font-size-14">John Doe</span>
              </div>
            </div>
            <span class="font-size-14">23 Min ago</span>
          </div>
        </div>
      </div>
    </div>
  </div>

Examples 02

Card can be used with rich type of content.

Crisp Spanish tortilla Matzo brei

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

John Doe
23 Min ago

Pro

$15 / mo

  • 20 users included
  • 10 GB of storage
  • Priority email support
  • Help center access
Demo
Quickly build an effective pricing for customers.

This is a wider card with supporting text below as a natural lead-in to additional content. below as a natu keal leadin to additional the content below as a natu ral lead.

  • 375
  • 127k
  • 375
<div class="row">
<div class="col">
  <div class="card text-white"
    style="background:linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.5)), url(../assets/img/share/307008.jpeg) no-repeat center center; background-size: cover;">
    <div class="card-body mt-10 pb-3">
      <h5 class="text-white">
        <a href="#">
          Crisp Spanish tortilla Matzo brei
        </a>
      </h5>
      <p>
        This is a wider card with supporting text below as a natural lead-in to additional content
        extended.
      </p>
    </div>
    <div class="card-footer border-0 pt-0">
      <div class="d-flex justify-content-between align-items-center">
        <div class="media align-items-center">
          <div class="avatar avatar-sm">
            <img class="avatar__img" src="../assets/img/avatars/43.jpg" alt="">
          </div>
          <div class="media-body pl-2">
            <span class="font-size-14">John Doe</span>
          </div>
        </div>
        <span class="font-size-14">23 Min ago</span>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="card text-center shadow">
    <div class="card-header">
      <h4 class="my-0 font-weight-normal">Pro</h4>
    </div>
    <div class="card-body">
      <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
      <ul class="list-unstyled mt-3 mb-4">
        <li>20 users included</li>
        <li>10 GB of storage</li>
        <li>Priority email support</li>
        <li>Help center access</li>
      </ul>
      <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
    </div>
  </div>
</div>
<div class="col">
  <div class="card">
    <div class="card-body">
      <span class="badge badge-info">Demo</span>
      <h5 class="my-4">
        <a href="#">
          Quickly build an effective pricing for customers.
        </a>
      </h5>

      <p class="mb-0">
        This is a wider card with supporting text below as a natural lead-in to additional content.
        below as a natu keal leadin to additional the content below as a natu ral lead.
      </p>
    </div>
    <ul class="card-footer list-inline mb-0">
      <li class="list-inline-item mr-3"><i class="fas fa-share"></i> 375</li>
      <li class="list-inline-item mr-3"><i class="fas fa-eye"></i> 127k</li>
      <li class="list-inline-item mr-3"><i class="far fa-comment-alt"></i> 375</li>
    </ul>
  </div>
</div>
</div>