Cardtitlesareusedbyadding`.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to an `<a>`tag.
Subtitlesareusedbyaddinga`.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body`item,thecardtitleandsubtitlearealignednicely.
`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text`canalsobestyledwiththestandardHTMLtags.
Usingacombinationofgridandutilityclasses,cardscanbemadehorizontalinamobile-friendlyandresponsiveway.Intheexamplebelow,weremovethegridgutterswith`.no-gutters` and use `.col-md-*` classes to make the card horizontal at the `md`breakpoint.Furtheradjustmentsmaybeneededdependingonyourcardcontent.
Use[borderutilities]({{site.baseurl}}/docs/{{site.docs_version}}/utilities/borders/)tochangejustthe`border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card`orasubsetofthecard'scontentsasshownbelow.
Cardscanbeorganizedinto[Masonry](https://masonry.desandro.com/)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
**Headsup!**Yourmileagewithcardcolumnsmayvary.Topreventcardsbreakingacrosscolumns,wemustsetthemto`display: inline-block` as `column-break-inside: avoid`isn'tabulletproofsolutionyet.