O'Reilly logo

Complete Bootstrap: Responsive Web Development with Bootstrap 4 by Ian Whitley, David Cochran, Bass Jobsen, Matt Lambert

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

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

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