Bootstrap 4 – Responsive Web Design

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