O'Reilly logo

Bootstrap 4 – Responsive Web Design by Jason Marah, Benjamin Jakobus, Matt Lambert, Silvio Moreto

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required