Making cards responsive

This recipe is closely connected with the preceding one. To show how to make cards responsive, we will use the preceding recipe's single card include.

To see the final result, open the chapter4/complete code's app folder, and run the git bash on it. Follow it up with the harp server command, and navigate to localhost:9000 in your browser to see the result we will achieve in this recipe.

Upon opening the web page as explained in the previous paragraph, you should see two rows of cards in two card decks. The container that holds them is styled with the .container-fluid class. Open the dev tools with F12 and drag its edge from right to left to see the decks respond to the change of the viewport.

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.