Creating the Latest Groups section

Let's jump into our VS Code and see how to implement the rest of this sidebar. Let's see what we are targeting:

We are going to add a card now. After the Friends section ends, we will add a new div tag and populate it with our code for our groups. Here is the code:

<div class="card groups">
  <div class="card-heading">
    <h6 class="card-title">Latest Groups</h6>
  </div>
  <div class="card-body">
    <div class="group-item">
      <img src="img/group.png" class="img-fluid">
      <h5><a href="#">Sample Group One</a></h5>
      <p>This is a Doubble social network sample group</p>
    </div>
<div class="clearfix"></div>

Inside the div tag, we have our class="cards groups". Then we have added one more div with the card-heading class. We then added an h6 header for our Latest Groups and also added the card-title class to it. Close the div and we will start creating...