Working with card layouts and the Flexbox grid

In this recipe, we will make layouts using the cards component with the help of Bootstrap 4 Flexbox grid to align them and look at some new CSS properties that will make the use of images in our cards easier by retaining their proper aspect ratio and preventing image stretching. We will also look at using lorempixel.com to create more believable mock-ups of our layouts.

Getting ready

To begin, open the completed page in your browser by navigating to the chapter8/complete/app folder and running the harp server command through the console. Point your browser to the completed recipe by visiting localhost:9000/chapter08-05. Observe the changes in the layout of the cards, components on different viewport resolutions.

How to do it…

1. Open the chapter8/start folder. Inside that folder, open the app folder, and then open the file titled recipe08-05.ejs and paste in the code that follows:

<div class="container">
 <h2 class="mt-5 pb-3">Recipe 08...