Modern Bootstrap 4 cards Tutorial

How to make nice white boxes with a shadow and no border?

Ever wondered how to make these slick modern cards using Bootstrap 4? They are the shit. For some reason they're not inside the Bootstrap docs though and I couldn't find this simple info anywhere else. So I decided to explain it here.

Friendly shadowy box

A horse walked into a bar. Several people got up and left as they spotted the potential danger in the situation.

Result

Example card

This is the content of the box. Feel free to fill it up with anything.

Code

<div class="card shadow-sm border-0">
  <div class="card-body">
    <h5>Header</h5>
    <p class="mb-0">
      This is the content of the box. Feel free to fill it up with anything.
    </p>
  </div>
</div>

Explanation

  • Override the card's default border setting by adding border-0 to it.
  • Add a discreet shadow by adding shadow-sm to the card class.
  • If you want the cards to really shine, make sure the background color of your page is something other than white. I recommend Bootstrap's bg-light:

    <body class="bg-light">

All done. Of course, you might want to just modify your Bootstrap template so every card automatically has these classes applied to it. But that's up to you.


Back to Blog