Learning cards in Bootstrap 4

As was mentioned before, Bootstrap 4 provides Cards components. To make use of them, create a div.card element and start adding elements such as .card-block and .card-img-top:

<div class="card">
  <img class="card-img-top img-responsive" src="imgs/landscape.jpg">
  <div class="card-block">
    <h4 class="card-title">Name</h4>
    <p class="card-text">About text</p>
    <a href="#" class="btn btn-primary">Can add buttons</a>
  </div>
</div>

For the preceding code, the output will look like what is shown in the following screenshot. As we can see, the Card component is pretty simple and straightforward. The component offers some other options as well, but we will talk about that when needed.

Creating your own cards

Like the famous quote, if you have lemons, make lemonade, in Bootstrap version 3, we do not have the Card component. However, we have the tools needed to make our own Card component for sure! So let's have some lemonade!

We will use the same classes and structures of Bootstrap 4, playing with only the CSS. Therefore, if you are using version 3, you will see the page render like this for the use of the same HTML from version 4:

To squeeze the first lemon, let's create the CSS for the .card class:

.card {
  position: relative;
  border: 0.1rem solid #e5e5e5;
  border-radius: 0.4rem;
  background-color: #FFF;
}

Following this, just add two CSS rules for img.card-img-top and .card-block, as shown here:

.card-img-top {
  border-radius: 0.4rem 0.4rem 0 0;
}

.card-block {
  padding: 1.25rem;
}

Done! We have our own card component ready for Bootstrap 3. The next screenshot presents the final result. Of course, there are some differences of typography and button color, but these are the differences because of the version; the component is perfectly done.

Adding Cards to our web application

Getting back to the web application, let's add the Card components inside div#profile, at the main container. The HTML code for this section will be as follows:

<div id="profile-resume" class="card">
  <img class="card-img-top img-responsive" src="imgs/landscape.jpg">
  <div class="card-block">
    <img src="imgs/jon.png" class="card-img">
    <h4 class="card-title">Jonny Doo <small>@jonnydoo</small></h4>
    <p class="card-text">Dog goes woofy. Did you said squitly?</p>
    <ul class="list-inline list-unstyled">
      <li id="card-tweets">
        <a href="#">
          <span class="profile-stats">Tweets</span>
          <span class="profile-value">99k</span>
        </a>
      </li>
      <li class="card-following">
        <a href="#">
          <span class="profile-stats">Following</span>
          <span class="profile-value">7</span>
        </a>
      </li>
      <li class="card-followers">
        <a href="#">
          <span class="profile-stats">Followers</span>
          <span class="profile-value">132k</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Breaking down the code, we added some components to .card-block. First of all is the .card-img element, which will represent the profile photography. Following this, we changed .card-title by adding a <small> tag inside <h4>. The last change is the addition of the <ul> list, representing some stats for the profile.

There is no secret in this HTML piece; we just added some elements in a straightforward way. Now it's time for the CSS rules. First, change the position and size of the img.card-img element:

.card-block img.card-img {
  top: 50%;
  margin-top: -36px;
  width: 72px;
  border: 3px solid #FFF;
  border-radius: 0.4rem;
  float: left;
  position: relative;
  z-index: 99;
}

Since it is in the right place, let's correctly align .card-title and add some padding to .card-text:

.card-block .card-title {
  float: left;
  margin: 0;
  margin-left: 0.5em;
}

.card-block .card-title small {
  display: block;
}

.card-block .card-text {
  clear: both;
  padding-top: 0.25em;
  margin-bottom: 1.5em;
}

It is almost looking like the Twitter card on the left; we just need to change the list style inside the profile card. Add this CSS:

.card-block ul a:hover {
  text-decoration: none;
}

.card-block ul .profile-stats {
  color: #777;
  display: block;
  text-transform: uppercase;
  font-size: 0.63em;
}

.card-block ul .profile-value {
  font-size: 1.2em;
  font-weight: bold;
  color: #2F92CA;
}

Well done! It looks prettier than the Twitter component. In the following screenshot, we present the expected result:

Another card using thumbnails

After the #profile-resume card, we will create another one named #profile-photo, which will contain photos of the user. Use the same cards methodology to place this new one after #profile-resume with the following HTML code:

<div id="profile-photo" class="card">
  <div class="card-header">Photos</div>
  <div class="card-block">
    <ul class="list-inline list-unstyled">
      <li>
        <a href="#" class="thumbnail"><img class="img-responsive" src="imgs/landscape-02.jpg"></a>
      </li>
      <li>
        <a href="#" class="thumbnail"><img class="img-responsive" src="imgs/landscape-03.jpg"></a>
      </li>
      <li>
        <a href="#" class="thumbnail"><img class="img-responsive" src="imgs/landscape-04.jpg"></a>
      </li>
      <li>
        <a href="#" class="thumbnail"><img class="img-responsive" src="imgs/landscape-05.jpg"></a>
      </li>
    </ul>
  </div>
</div>

In this card we will create a new card element, .card-header. In Bootstrap 4, you can use the regarding class, but in version 3, you will need this CSS rule:

.card .card-header {
  border-radius: 0.4rem 0.4rem 0 0;
  padding: .75rem 1.25rem;
  background-color: #f5f5f5;
  border-bottom: 0.1em solid #e5e5e5;
  color: #4e5665;
  font-weight: bold;
}

Moving on, the rest of CSS for this card is simple. Just change the image's width and adjust some margins and paddings:

#profile-photo {
  margin-top: 2rem;
}

#profile-photo ul {
  margin: 0;
}

#profile-photo li {
  width: 48%;
  padding: 0;
}

Also note that we are using the .thumbnail class in the <a> tag that wraps the images. This class is useful for nicely styled thumbnail images. It can also be used to wrap text along with an image.

The photo card should look like what is shown in the following screenshot. Again, we will use some more cards in this web application, although we'll talk about that later, when needed.