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