The .card-columns class creates a masonry-like grid of cards. The layout will automatically adjust as you delete or insert cards. If you don't want the default bootstrap colors (primary, alert, warning etc.) you can change it by inserting a background color with the style tag, just like I did with the red color in the last card. You can also delete or copy the "link" in the first card. Here is the link to the html code in a text file: Code
Note: The cards are displayed vertically on small screens (less than 576px).

The .card-deck class creates a grid of cards that are of equal height and width. The layout will automatically adjust as you insert more cards. 
Here is the link to the html code in a text file: Code
Note: The cards are displayed vertically on small screens (less than 576px).

The .card-group class is similar to .card-deck. The only difference is that the .card-group class removes left and right margins between each card. Note: The cards are displayed vertically on small screens (less than 576px), WITH top and bottom margin. Here is the html code in a text file: Code

A card deck with an image and a text (with links). Be sure to exchange my picture here with your own in the code ( example for the first card:  deck_flower.jpg). Here is the code in a text file: Code 

If you need the pictures as well, here is the link: Pictures

A card deck with a text on an image. I changed the opacity of the background pictures with an image editing software (easier than css :-)) Be sure to exchange my picture here with your own in the code ( example for the first card: deck_flower_trans.jpg) Here is the code in a text file: Code 

If you need the pictures as well, here is the link: Pictures