Bootstrap Cards

Discover 38 Bootstrap Cards available in Loopple

Card Stats

Component from Argon Dashboard Builder

<div class="card card-stats draggable">
  <div class="card-body">
    <div class="row">
      <div class="col">
        <h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
        <span class="h2 font-weight-bold mb-0">2,356</span>
      </div>
      <div class="col-auto">
        <div class="icon icon-shape bg-orange text-white rounded-circle shadow">
          <i class="fa fa-chart-pie"></i>
        </div>
      </div>
    </div>
    <p class="mt-3 mb-0 text-sm">
      <span class="text-success mr-2">
        <i class="fa fa-arrow-up"></i> 3.48% </span>
      <span class="text-nowrap">Since last month</span>
    </p>
  </div>
</div>

Card Profile

Component from Argon Dashboard Builder

<div class="card card-profile draggable">
  <img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/img-1-1000x600.jpg" alt="Image placeholder" class="card-img-top">
  <div class="row justify-content-center">
    <div class="col-lg-3 order-lg-2">
      <div class="card-profile-image">
        <a href="#">
          <img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg" class="rounded-circle">
        </a>
      </div>
    </div>
  </div>
  <div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
    <div class="d-flex justify-content-between">
      <a href="#" class="btn btn-sm btn-info  mr-4 ">Connect</a>
      <a href="#" class="btn btn-sm btn-default float-right">Message</a>
    </div>
  </div>
  <div class="card-body pt-0">
    <div class="row">
      <div class="col">
        <div class="card-profile-stats d-flex justify-content-center">
          <div>
            <span class="heading">22</span>
            <span class="description">Friends</span>
          </div>
          <div>
            <span class="heading">10</span>
            <span class="description">Photos</span>
          </div>
          <div>
            <span class="heading">89</span>
            <span class="description">Comments</span>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center">
      <h5 class="h3"> Jessica Jones <span class="font-weight-light">, 27</span>
      </h5>
      <h5 class="font-weight-300"> Bucharest, Romania </h5>
      <h5 class="h5 mt-4"> Solution Manager - Creative Tim Officer </h5>
      <h5> University of Computer Science </h5>
    </div>
  </div>
</div>

Card Simple

Component from Argon Dashboard Builder

<div class="card draggable">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>