O'Reilly logo

Bootstrap 4 Cookbook by Ajdin Imsirovic

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

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-05: Working with Card Layouts and the Flexbox Grid</h2> <p class="mt-4">In this recipe we will look at two ways of using card components with the flexbox grid.</p> <p class="mt-4">In the first example (the first three cards on a gray background), we will take a more traditional approach of adding several <code>col-*</code> classes to control the layout of elements on the page.</p> <p class="mt-4 mb-5">In the second example, we will wrap all the cards in a div with just a simple <code>col</code> class. Then we will ...

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