Bootstrap 3 Card

Question

Our web application needs a dashboard that will have multiple cards on it. These cards would be links to other apps / pages etc, we specifically want to use bootstrap 3 as we do not the time and energy to upgrade to bootstrap 4 any suggestions code examples would be helpful.

Answer 1

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".