View on GitHub

Card profile

Feature a user’s profile with the card profile variant.

On this page

Examples

Jacob Thornton

Big belly rude boy, million dollar hustler. Unemployed.

Mark Otto

GitHub and Bootstrap. Formerly at Twitter. Huge nerd.

html

<div class="row">
  <div class="col-lg-6">
    <div class="card card-profile">
      <div class="card-header" style="background-image: url(/docs/assets/img/examples/unsplash-1.jpg);"></div>
      <div class="card-body text-center">
        <img class="card-profile-img" src="/docs/assets/img/examples/avatar-fat.jpg" alt="Jacob Thornton avatar">
        <h5 class="card-title">Jacob Thornton</h5>
        <p class="mb-4">Big belly rude boy, million dollar hustler. Unemployed.</p>
        <button class="btn btn-outline-primary btn-sm">Follow</button>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card card-profile">
      <div class="card-header" style="background-image: url(/docs/assets/img/examples/unsplash-2.jpg);"></div>
      <div class="card-body text-center">
        <img class="card-profile-img" src="/docs/assets/img/examples/avatar-mdo.png" alt="Mark Otto avatar">
        <h5 class="card-title">Mark Otto</h5>
        <p class="mb-4">GitHub and Bootstrap. Formerly at Twitter. Huge nerd.</p>
        <button class="btn btn-outline-primary btn-sm">Follow</button>
      </div>
    </div>
  </div>
</div>

CSS

Sass variables

$card-profile-title-margin-bottom: $spacer * .3;
$card-profile-header-height:       $spacer * 9.4;

$card-profile-img-width:           $spacer * 6.3;
$card-profile-img-margin-top:      -($card-profile-header-height * .5);
$card-profile-img-margin-bottom:   $spacer * .3;
$card-profile-img-border-width:    $border-width * 3;
$card-profile-img-border-color:    $white;
$card-profile-img-box-shadow:      0 ($spacer * .1) ($spacer * .1) rgba($black, .1);