Updating the Blog index page

Now that we've covered the card component, it's time to set up the main layout for our Blog index page. The design is going to rely heavily on the Card component, so let's get to it. First of all, open up index.ejs in your text editor and find the body of the page section. The left column will look like this:

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

Within this <div> currently is some filler text. Delete the filler text and insert the following Card component, which will be our first Blog post:

<div class="card"> <img class="card-img-top img-fluid" src="img/image.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Post title</h4> <p><small>Posted by <a href="#">Admin</a> on January 1, 2016 in <a href="#">Category</a></small></p> ...

Get Bootstrap 4 – Responsive Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.