Bootstrap 4 – Responsive Web Design

Finishing with the right-hand-side content

Well, we are almost done. It is time to create the right-hand-side content of our web app. The right-hand-side content contains information such as Whom to follow and the about page. Let's create it!

Coming to the HTML, let's create another Card component inside div.right-content, as follows:

<div id="right-content" class="col-md-3 hidden-sm hidden-xs">
  <div id="who-follow" class="card">
    <div class="card-header">
      Who to follow
    </div>
    <div class="card-block">
      
    </div>
  </div>
</div>

Inside .card-block, create a vertical list:

<div id="right-content" class="col-md-3 hidden-sm hidden-xs">
  <div id="who-follow" class="card">
    <div class="card-header">

      Who to follow
    </div>
    <div class="card-block">
 <ul class="list-unstyled"> ...