Let's add some more content to the index page by adding the sidebar. We'll also use the Card component here, but in this case, some different variations of it. Go back to index.ejs and remove the filler text from the second column. Instead, insert the following Card code:

<div class="card card-block"> 
  <h5 class="card-title">Recent Posts</h5> 
  <div class="list-group"> 
    <button type="button" class="list-group-item">Cras justo odio</button> 
    <button type="button" class="list-group-item">Dapibus ac facilisis in</button> 
    <button type="button" class="list-group-item">Morbi leo risus</button> 
    <button type="button" class="list-group-item">Porta ac consectetur ac</button> 
    <button type="button" class="list-group-item">Vestibulum at eros</button> 
  </div> 
  <div class="m-t-1"><a href="#">View More</a></div> 
</div> 

You'll notice in this Card I'm using a different variation, which is the List Group option. To do this, follow these steps:

Once you're done, save your file and it should look like this in the browser:

As you can see, that will draw a nice-looking sidebar list component. Let's fill out the rest of the sidebar by inserting the following code after the first Card component:

<div class="card card-block"> 
  <h5 class="card-title">Archives</h5> 
  <div class="list-group"> 
    <button type="button" class="list-group-item">Cras justo odio</button> 
    <button type="button" class="list-group-item">Dapibus ac facilisis in</button> 
    <button type="button" class="list-group-item">Morbi leo risus</button> 
    <button type="button" class="list-group-item">Porta ac consectetur ac</button> 
    <button type="button" class="list-group-item">Vestibulum at eros</button> 
  </div> 
  <div class="m-t-1"><a href="#">View More</a></div> 
</div> 
<div class="card card-block"> 
  <h5 class="card-title">Categories</h5> 
  <div class="list-group"> 
    <button type="button" class="list-group-item">Cras justo odio</button> 
    <button type="button" class="list-group-item">Dapibus ac facilisis in</button> 
    <button type="button" class="list-group-item">Morbi leo risus</button> 
    <button type="button" class="list-group-item">Porta ac consectetur ac</button> 
    <button type="button" class="list-group-item">Vestibulum at eros</button> 
  </div> 
  <div class="m-t-1"><a href="#">View More</a></div> 
</div> 

This will produce two more List Group Card components for the sidebar of your blog project. Once it's all done, the entire page should now look like this:

That concludes the user of the Card component on the index page. The last page we need to set up with the Card component is our Blog post page.

The index page is a list of all the Blog posts in our project. The last page we need to setup is the Blog post page, which is just a single post in our project. Open up the blog-post.ejs template you created earlier in the book and let's start updating some code. Head down to the page body section and find this line of code:

<div class="col-md-8"> 

Currently, you'll see some filler text in that <div>; let's replace it with the following code:

<div class="card"> 
  <div class="card-block"> 
    <p><small>Posted by <a href="#">Admin</a> on January 1, 2016 in <a href="#">Category</a></small></p> 
    <p>Pellentesque habitant morbi tristique senectus et...</p> 
    <p><code>&lt;p&gt;this is what a code sample looks like&lt;/p&gt;</code></p> 
    <p>Pellentesque habitant morbi tristique senectus et netus...</p> 
    <!-- pre sample start //--> 
    <h4>pre sample code</h4> 
    <pre>This is what code will look like</pre> 
    <!-- pre sample end //--> 
    <!-- image //--> 
    <h4>responive image</h4> 
    <p><img src="img/image.jpg" class="img-fluid" alt="Responsive image"></p> 
    <!-- table //--> 
    <h4>table</h4> 
    <table class="table"> 
      <thead> 
        <tr> 
          <th>#</th> 
          <th>First Name</th> 
          <th>Last Name</th> 
          <th>Username</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <th scope="row">1</th> 
          <td>john</td> 
          <td>smith</td> 
          <td>@jsmith</td> 
        </tr> 
        <tr> 
          <th scope="row">2</th> 
          <td>steve</td> 
          <td>stevens</td> 
          <td>@steve</td> 
        </tr> 
        <tr> 
          <th scope="row">3</th> 
          <td>mike</td> 
          <td>michaels</td> 
          <td>@mike</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
</div> 

There's a good chunk of things going on in this code. I've thrown in a few other components we've already learned about so you can see them in action. The Card component has the following things included inside it:

Let's also update this template to use the same sidebar code as the index page. Copy the right column code from the index template and paste it into the same location in the blog post template.

When you are done, the page should now look like this:

As you can see, we're using a single Card component to hold all of the content for the body of the page. We're also using the same Card components for the sidebar that we copied over from the index page. Now that we've added the Cards to all of our page templates, let's get back to learning about some other Content components in Bootstrap 4.