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>

Card Balance Empty

Component from Argon Dashboard Builder

Card Testimonial

Component from Argon Dashboard Builder

Card Collapse

Component from Argon Dashboard Builder

Card Job Post

Component from Argon Dashboard Builder

Card Collapse Details

Component from Argon Dashboard Builder

Card User Details

Component from Argon Dashboard Builder

Card Carousel

Component from Argon Dashboard Builder