Cards

<!-- Card No Image -->
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title here</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
    <a class="btn btn-sm btn-primary mt-2" href="#">Go Somewhere</a>
  </div>
</div>

<!-- Card Top Image -->
<div class="card">
  <img src="path-to-image" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">Card title here</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
    <a class="btn btn-sm btn-gradient mt-2" href="#">Go Somewhere</a>
  </div>
</div>

<!-- Card Bottom Image -->
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title here</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
    <a class="btn btn-sm btn-accent mt-2" href="#">Go Somewhere</a>
  </div>
  <img src="path-to-image" alt="Card image">
</div>

<!-- Card with Header -->
<div class="card text-center">
  <div class="card-header">
    <p class="text-muted font-weight-bold">Card header text</p>
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
    <a class="btn btn-primary btn-sm mt-2" href="#">Go Somewhere</a>
  </div>
</div>

<!-- Card with Footer -->
<div class="card text-center">
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
    <a class="btn btn-primary btn-sm mt-2" href="#">Go Somewhere</a>
  </div>
  <div class="card-footer">
    <p class="text-muted font-weight-bold">Card footer text</p>
  </div>
</div>

<!-- Left Aligned (Default) -->
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title here</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
    <a class="btn btn-sm btn-primary mt-2" href="#">Go Somewhere</a>
  </div>
</div>

<!-- Center Aligned -->
<div class="card text-center">
  <div class="card-body">
    <h4 class="card-title">Card title here</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
    <a class="btn btn-sm btn-primary mt-2" href="#">Go Somewhere</a>
  </div>
</div>

<!-- Right Aligned -->
<div class="card text-right">
  <div class="card-body">
    <h4 class="card-title">Card title here</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
    <a class="btn btn-sm btn-primary mt-2" href="#">Go Somewhere</a>
  </div>
</div>

<!-- Card with Tabs -->
<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" href="#" data-toggle="tab" role="tab"
          ><i class="fe-icon-home"></i>
          &nbsp;Home
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" data-toggle="tab" role="tab">
          <i class="fe-icon-user"></i>
          &nbsp;Profile
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" data-toggle="tab" role="tab">
          <i class="fe-icon-settings"></i>
          &nbsp;Settings
        </a>
      </li>
    </ul>
  </div>
  <div class="card-body text-center">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
  </div>
</div>

<!-- Card with Pills -->
<div class="card">
  <div class="card-header">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body text-center">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
  </div>
</div>                

<!-- List Group inside Card -->
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item active">Dapibus ac facilisis (active)</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
  </ul>
  <div class="card-body">
    <a class="btn btn-sm btn-primary" href="#">Go Somewhere</a>
  </div>
</div>

<!-- Card Primary Border -->
<div class="card border border-primary">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
  </div>
</div>

<!-- Card Accent Border -->
<div class="card border border-accent">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
  </div>
</div>

<!-- Card Info Border -->
<div class="card border border-info">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
  </div>
</div>

<!-- Card Success Border -->
<div class="card border border-success">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
  </div>
</div>

<!-- Card Warning Border -->
<div class="card border border-warning">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
  </div>
</div>

<!-- Card Danger Border -->
<div class="card border border-danger">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
  </div>
</div>

<!-- Card Dark Border -->
<div class="card border border-dark">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
  </div>
</div>

<!-- Card Secondary Border -->
<div class="card border border-secondary">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
  </div>
</div>

<!-- Cards Layout: Group -->
<div class="card-group">

  <!-- Card -->
  <div class="card mb-30">
    <img src="path-to-image" alt="Card image">
    <div class="card-body">
      <h4 class="card-title">Card title here</h4>
      <p class="card-text">This is a wider card with...</p>
    </div>
    <div class="card-footer text-muted text-sm">
      <span class="opacity-75">Last updated 3 mins ago</span>
    </div>
  </div>

  <!-- Card -->
  <div class="card mb-30">
    <img src="path-to-image" alt="Card image">
    <div class="card-body">
      <h4 class="card-title">Card title here</h4>
      <p class="card-text">This card has supporting..</p>
    </div>
    <div class="card-footer text-muted text-sm">
      <span class="opacity-75">Last updated 3 mins ago</span>
    </div>
  </div>

  <!-- Card -->
  <div class="card mb-30">
    <img src="path-to-image" alt="Card image">
    <div class="card-body">
      <h4 class="card-title">Card title here</h4>
      <p class="card-text">This is a wider card...</p>
    </div>
    <div class="card-footer text-muted text-sm">
      <span class="opacity-75">Last updated 3 mins ago</span>
    </div>
  </div>
</div>

<!-- Cards Layout: Deck -->
<div class="card-deck">

  <!-- Card -->
  <div class="card mb-30">
    <img src="path-to-image" alt="Card image">
    <div class="card-body">
      <h4 class="card-title">Card title here</h4>
      <p class="card-text">This is a wider card with...</p>
    </div>
    <div class="card-footer text-muted text-sm">
      <span class="opacity-75">Last updated 3 mins ago</span>
    </div>
  </div>

  <!-- Card -->
  <div class="card mb-30">
    <img src="path-to-image" alt="Card image">
    <div class="card-body">
      <h4 class="card-title">Card title here</h4>
      <p class="card-text">This card has supporting..</p>
    </div>
    <div class="card-footer text-muted text-sm">
      <span class="opacity-75">Last updated 3 mins ago</span>
    </div>
  </div>

  <!-- Card -->
  <div class="card mb-30">
    <img src="path-to-image" alt="Card image">
    <div class="card-body">
      <h4 class="card-title">Card title here</h4>
      <p class="card-text">This is a wider card...</p>
    </div>
    <div class="card-footer text-muted text-sm">
      <span class="opacity-75">Last updated 3 mins ago</span>
    </div>
  </div>
</div>

<!-- Cards Layout: Columns -->
<div class="card-columns">

  <!-- Card -->
  <div class="card mb-30">
    <img src="path-to-image" alt="Card image">
    <div class="card-body">
      <h4 class="card-title">Card title here</h4>
      <p class="card-text">This is a wider card...</p>
      <span class="text-muted text-sm opacity-75">Last updated 3 mins ago</span>
    </div>
  </div>

  <!-- Card -->
  <div class="card mb-30">
    <div class="card-body">
      <h4 class="card-title">Card title here</h4>
      <p class="card-text">Lorem ipsum dolor sit amet...</p>
      <span class="text-muted text-sm opacity-75">Last updated 3 mins ago</span>
    </div>
  </div>

  <!-- Card -->
  <div class="card mb-30">
    <img src="path-to-image" alt="Card image">
    <div class="card-body">
      <h4 class="card-title">Card title here</h4>
      <p class="card-text">This card has supporting...</p>
      <span class="text-muted text-sm opacity-75">Last updated 3 mins ago</span>
    </div>
  </div>

  <!-- Card -->
  <div class="card border border-primary mb-30 text-center">
    <div class="card-body">
      <p class="card-text">Lorem ipsum dolor sit amet...</p>
      <span class="text-muted text-sm opacity-75">Last updated 3mins ago</span>
    </div>
  </div>

  <!-- Card -->
  <div class="card mb-30">
    <img class="card-img-top" src="path-to-image" alt="Card image">
  </div>

  <!-- Card -->
  <div class="card border border-info mb-30">
    <div class="card-body">
      <p class="card-text">Lorem ipsum dolor sit amet...</p>
      <span class="text-muted text-sm opacity-75">Last updated 3mins ago</span>
    </div>
  </div>

  <!-- Card -->
  <div class="card border mb-30">
    <div class="card-body">
      <h4 class="card-title">Card title here</h4>
      <p class="card-text">Lorem ipsum dolor sit amet...</p>
      <span class="text-muted text-sm opacity-75">Last updated 3mins ago</span>
    </div>
  </div>
</div>