Finishing with the right-hand-side content_Bootstrap 4：Responsive Web Design-QQ阅读女生青春网

上QQ阅读APP看书，第一时间看更新

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">
 <li>
 <img src="imgs/cat.jpg" class="img-rounded">
 <div class="info">
 <strong>Crazy cats</strong>
 <button class="btn btn-default">
 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Follow
 </button>
 </div>
 </li>
 <li>
 <img src="imgs/ration.jpg" class="img-rounded">
 <div class="info">
 <strong>Free ration alert</strong>
 <button class="btn btn-default">
 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Follow
 </button>
 </div>
 </li>
 </ul>
    </div>
  </div>
</div>

So, the result without the CSS is not good, as shown in the following screenshot. We need to fix it.

Finishing with the right-hand-side content

First, we add margins for the items in the list:

div#who-follow li {
  margin-bottom: 2em;
}

div#who-follow li:last-child {
  margin-bottom: 0;
}

Then, we adjust the size of the image and the following text:

div#who-follow li img {
  width: 26%;
  display: inline-block;
  vertical-align: top;
  margin-right: 2%;
}

div#who-follow li .info {
  width: 68%;
  display: inline-block;
}

To finish this, we adjust the content inside the .info element:

div#who-follow li .info strong {
  display: block;
  overflow:hidden;
  text-overflow: ellipsis;
}

div#who-follow li .info .glyphicon {
  color: #2F92CA;
}

The result should look like what is shown here:

To end the main web page content, let's create another card that has content about the web app, such as help, privacy, and so on. After the div#who-follow, create another card:

<div id="app-info" class="card">
  <div class="card-block">
    © 2015 SampleApp
    <ul class="list-unstyled list-inline">
      <li><a href="#">About</a></li>
      <li><a href="#">Terms and Privacy</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Status</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="card-footer">
    <a href="#">Connect other address book</a>
  </div>
</div>

First of all, note that we have just used .card-footer for this card. If you are using Bootstrap 3, add the next CSS:

.card .card-footer {
  border-radius: 0 0 0.4rem 0.4rem;
  padding: .75rem 1.25rem;
  background-color: #f5f5f5;
  border-top: 0.1em solid #e5e5e5;
  color: #4e5665;
}

For this card, we also need to add some margin within the card above:

div#app-info {
  margin-top: 2rem;
}

That looks great! We have finished the majority of the components in our web application! The next image shows the final result that we will cover at this chapter. Great work!