Bootstrap 3 Card

So after some digging around I came up with a card myself using bootstrap 3

<div class="row">
  <div class="col-md-2">&nbsp;</div>
  <div class="col-md-8">
    <div class="row space-16">&nbsp;</div>
    <div class="row">
      <div class="col-sm-4">
        <div class="thumbnail">
          <div class="caption text-center" onclick="location.href='https://flow.microsoft.com/en-us/connectors/shared_slack/slack/'">
            <div class="position-relative">
              <img src="https://az818438.vo.msecnd.net/icons/slack.png" style="width:72px;height:72px;" />
            </div>
            <h4 id="thumbnail-label"><a href="https://flow.microsoft.com/en-us/connectors/shared_slack/slack/" target="_blank">Microsoft Slack</a></h4>
            <p><i class="glyphicon glyphicon-user light-red lighter bigger-120"></i>&nbsp;Auditor</p>
            <div class="thumbnail-description smaller">Slack is a team communication tool, that brings together all of your team communications in one place, instantly searchable and available wherever you go.</div>
          </div>
          <div class="caption card-footer text-center">
            <ul class="list-inline">
              <li><i class="people lighter"></i>&nbsp;7 Active Users</li>
              <li></li>
              <li><i class="glyphicon glyphicon-envelope lighter"></i><a href="#">&nbsp;Help</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-2">&nbsp;</div>
  </div>
</div>

Css for the above

.thumbnail {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
   transition: 0.3s;
   min-width: 40%;
   border-radius: 5px;
 }

 .thumbnail-description {
   min-height: 40px;
 }

 .thumbnail:hover {
   cursor: pointer;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 1);
 }

Here is an example that uses Bootstrap 3 works well - although need some more work


Cards are called panels in Bootstrap 3. You can either use panels instead of cards to create a similar appearance, or you can use a third-party package to add cards capability to Bootstrap 3.

Option 1: Use Panels instead of Cards

Bootstrap 3 uses Panels instead of Cards. They are basically the same thing.

If you are writing new code, then this would be the best option. You can also search and replace "card" with "panel" if you are copy and pasting code that has class="card" in it.

Bootstrap 3

<div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class="panel-body">Panel Content</div>
  <div class="panel-footer">Panel Footer</div>
</div>

Bootstrap 4

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

So if you want to use Cards in Bootstrap 3, just use Panels instead.

Option 2: Add Cards to Bootstrap 3

I have not tested this, but Martin Bean created a package that allows you to use Cards within Bootstrap 3.

  • Card component for Bootstrap 3 (GitHub)

This may be useful if you are copy and pasting HTML code already marked up with class="card".

Tags:

Twitter Bootstrap

Recent Posts