How to do it…

  1. Open the folder titled chapter8/start/app, search the file named recipe08-06.ejs and paste in the following code:
<div class="container"> <h2 class="mt-5 pb-3">Recipe 08-06: Center-Aligning Cards on Wider Viewports Only</h2> <p class="mt-4">In this recipe we will look at centering the card content with flexbox.</p></div><!-- /.container --><style> .col { min-width: 280px; } .card img { max-height: 320px; /* height: 300px; */ object-fit: cover; object-position: 50% 10%; /* object-position:  <from-left> <from-top> */ }</style><div class="container-fluid bg-faded pt-5 pb-5"> <div class="container"> <div class="row align-items-lg-center"> <div class="col mt-3 mb-3"> <%- partial("partial/_card-0806-01") %> </div> <div class="col ...

Get Bootstrap 4 Cookbook 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.