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.
To get acquainted with how card decks work, navigate to the card decks section of the Bootstrap documentation at https://v4-alpha.getbootstrap.com/components/card/#card-decks.