Cards
Cards are flexible content containers.

Microsoft
Software and hardware
Empower every person and every organization on the planet to achieve more.
Apple
Hardware and software

To make a contribution to the world by making tools for the mind that advance humankind.

Google I/O
Software and hardware
An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.

Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process.
Apple
Hardware and software
To make a contribution to the world by making tools for the mind that advance humankind.

Google
Software and hardware
Organize the world’s information and make it universally accessible and useful.

Add a container element with the card
class.
And add child elements with the card-image
, card-header
, card-body
and/or card-footer
classes.
The card-image
can be placed in any position.
<div class="card">
<div class="card-image">
<img src="img/osx-el-capitan.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="card-title h5">...</div>
<div class="card-subtitle text-gray">...</div>
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
<button class="btn btn-primary">...</button>
</div>
</div>