src/scss/bootstrap-4.0.0-alpha.6/docs/components/card.md

   1 ---
   2 layout: docs
   3 title: Cards
   4 description: Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
   5 group: components
   6 ---
   7
   8 A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
   9
  10 If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
  11
  12 ## Contents
  13
  14 * Will be replaced with the ToC, excluding the "Contents" header
  15 {:toc}
  16
  17 ## Example
  18
  19 Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
  20
  21 Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
  22
  23 {% example html %}
  24 <div class="card" style="width: 20rem;">
  25   <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
  26   <div class="card-block">
  27     <h4 class="card-title">Card title</h4>
  28     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  29     <a href="#" class="btn btn-primary">Go somewhere</a>
  30   </div>
  31 </div>
  32 {% endexample %}
  33
  34 ## Content types
  35
  36 Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported.
  37
  38 ### Blocks
  39
  40 The building block of a card is the `.card-block`. Use it whenever you need a padded section within a card.
  41
  42 {% example html %}
  43 <div class="card">
  44   <div class="card-block">
  45     This is some text within a card block.
  46   </div>
  47 </div>
  48 {% endexample %}
  49
  50 ### Titles, text, and links
  51
  52 Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to  a `<a>` tag.
  53
  54 Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
  55
  56 {% example html %}
  57 <div class="card">
  58   <div class="card-block">
  59     <h4 class="card-title">Card title</h4>
  60     <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
  61     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  62     <a href="#" class="card-link">Card link</a>
  63     <a href="#" class="card-link">Another link</a>
  64   </div>
  65 </div>
  66 {% endexample %}
  67
  68 ### Images
  69
  70 `.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` can also be styled with the standard HTML tags.
  71
  72 {% example html %}
  73 <div class="card">
  74   <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
  75   <div class="card-block">
  76     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  77   </div>
  78 </div>
  79 {% endexample %}
  80
  81 ### List groups
  82
  83 Create lists of content in a card with a flush list group.
  84
  85 {% example html %}
  86 <div class="card">
  87   <ul class="list-group list-group-flush">
  88     <li class="list-group-item">Cras justo odio</li>
  89     <li class="list-group-item">Dapibus ac facilisis in</li>
  90     <li class="list-group-item">Vestibulum at eros</li>
  91   </ul>
  92 </div>
  93 {% endexample %}
  94
  95 ### Kitchen sink
  96
  97 Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
  98
  99 {% example html %}
 100 <div class="card" style="width: 20rem;">
 101   <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
 102   <div class="card-block">
 103     <h4 class="card-title">Card title</h4>
 104     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 105   </div>
 106   <ul class="list-group list-group-flush">
 107     <li class="list-group-item">Cras justo odio</li>
 108     <li class="list-group-item">Dapibus ac facilisis in</li>
 109     <li class="list-group-item">Vestibulum at eros</li>
 110   </ul>
 111   <div class="card-block">
 112     <a href="#" class="card-link">Card link</a>
 113     <a href="#" class="card-link">Another link</a>
 114   </div>
 115 </div>
 116 {% endexample %}
 117
 118 ### Header and footer
 119
 120 Add an optional header and/or footer within a card.
 121
 122 {% example html %}
 123 <div class="card">
 124   <div class="card-header">
 125     Featured
 126   </div>
 127   <div class="card-block">
 128     <h4 class="card-title">Special title treatment</h4>
 129     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 130     <a href="#" class="btn btn-primary">Go somewhere</a>
 131   </div>
 132 </div>
 133 {% endexample %}
 134
 135 Card headers can be styled by adding `.card-header` to `<h*>` elements.
 136
 137 {% example html %}
 138 <div class="card">
 139   <h3 class="card-header">Featured</h3>
 140   <div class="card-block">
 141     <h4 class="card-title">Special title treatment</h4>
 142     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 143     <a href="#" class="btn btn-primary">Go somewhere</a>
 144   </div>
 145 </div>
 146 {% endexample %}
 147
 148 {% example html %}
 149 <div class="card">
 150   <div class="card-header">
 151     Quote
 152   </div>
 153   <div class="card-block">
 154     <blockquote class="card-blockquote">
 155       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 156       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 157     </blockquote>
 158   </div>
 159 </div>
 160 {% endexample %}
 161
 162 {% example html %}
 163 <div class="card text-center">
 164   <div class="card-header">
 165     Featured
 166   </div>
 167   <div class="card-block">
 168     <h4 class="card-title">Special title treatment</h4>
 169     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 170     <a href="#" class="btn btn-primary">Go somewhere</a>
 171   </div>
 172   <div class="card-footer text-muted">
 173     2 days ago
 174   </div>
 175 </div>
 176 {% endexample %}
 177
 178 ## Sizing
 179
 180 Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
 181
 182 ### Using grid markup
 183
 184 Using the grid, wrap cards in columns and rows as needed.
 185
 186 {% example html %}
 187 <div class="row">
 188   <div class="col-sm-6">
 189     <div class="card">
 190       <div class="card-block">
 191         <h3 class="card-title">Special title treatment</h3>
 192         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 193         <a href="#" class="btn btn-primary">Go somewhere</a>
 194       </div>
 195     </div>
 196   </div>
 197   <div class="col-sm-6">
 198     <div class="card">
 199       <div class="card-block">
 200         <h3 class="card-title">Special title treatment</h3>
 201         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 202         <a href="#" class="btn btn-primary">Go somewhere</a>
 203       </div>
 204     </div>
 205   </div>
 206 </div>
 207 {% endexample %}
 208
 209 ### Using utilities
 210
 211 Use our handful of [available sizing utilities]({{ site.baseurl }}/utilities/sizing/) to quickly set a card's width.
 212
 213 {% example html %}
 214 <div class="card w-75">
 215   <div class="card-block">
 216     <h3 class="card-title">Card title</h3>
 217     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 218     <a href="#" class="btn btn-primary">Button</a>
 219   </div>
 220 </div>
 221
 222 <div class="card w-50">
 223   <div class="card-block">
 224     <h3 class="card-title">Card title</h3>
 225     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 226     <a href="#" class="btn btn-primary">Button</a>
 227   </div>
 228 </div>
 229 {% endexample %}
 230
 231 ### Using custom CSS
 232
 233 Use custom CSS in your stylesheets or as inline styles to set a width.
 234
 235 {% example html %}
 236 <div class="card" style="width: 20rem;">
 237   <div class="card-block">
 238     <h3 class="card-title">Special title treatment</h3>
 239     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 240     <a href="#" class="btn btn-primary">Go somewhere</a>
 241   </div>
 242 </div>
 243 {% endexample %}
 244
 245 ## Text alignment
 246
 247 You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/utilities/typography/#text-alignment).
 248
 249 {% example html %}
 250 <div class="card" style="width: 20rem;">
 251   <div class="card-block">
 252     <h4 class="card-title">Special title treatment</h4>
 253     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 254     <a href="#" class="btn btn-primary">Go somewhere</a>
 255   </div>
 256 </div>
 257
 258 <div class="card text-center" style="width: 20rem;">
 259   <div class="card-block">
 260     <h4 class="card-title">Special title treatment</h4>
 261     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 262     <a href="#" class="btn btn-primary">Go somewhere</a>
 263   </div>
 264 </div>
 265
 266 <div class="card text-right" style="width: 20rem;">
 267   <div class="card-block">
 268     <h4 class="card-title">Special title treatment</h4>
 269     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 270     <a href="#" class="btn btn-primary">Go somewhere</a>
 271   </div>
 272 </div>
 273 {% endexample %}
 274
 275 ## Navigation
 276
 277 Add some navigation to a card's header (or block) with Bootstrap's [nav components]({{ site.baseurl }}/components/navs/).
 278
 279 {% example html %}
 280 <div class="card text-center">
 281   <div class="card-header">
 282     <ul class="nav nav-tabs card-header-tabs">
 283       <li class="nav-item">
 284         <a class="nav-link active" href="#">Active</a>
 285       </li>
 286       <li class="nav-item">
 287         <a class="nav-link" href="#">Link</a>
 288       </li>
 289       <li class="nav-item">
 290         <a class="nav-link disabled" href="#">Disabled</a>
 291       </li>
 292     </ul>
 293   </div>
 294   <div class="card-block">
 295     <h4 class="card-title">Special title treatment</h4>
 296     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 297     <a href="#" class="btn btn-primary">Go somewhere</a>
 298   </div>
 299 </div>
 300 {% endexample %}
 301
 302 {% example html %}
 303 <div class="card text-center">
 304   <div class="card-header">
 305     <ul class="nav nav-pills card-header-pills">
 306       <li class="nav-item">
 307         <a class="nav-link active" href="#">Active</a>
 308       </li>
 309       <li class="nav-item">
 310         <a class="nav-link" href="#">Link</a>
 311       </li>
 312       <li class="nav-item">
 313         <a class="nav-link disabled" href="#">Disabled</a>
 314       </li>
 315     </ul>
 316   </div>
 317   <div class="card-block">
 318     <h4 class="card-title">Special title treatment</h4>
 319     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 320     <a href="#" class="btn btn-primary">Go somewhere</a>
 321   </div>
 322 </div>
 323 {% endexample %}
 324
 325 ## Images
 326
 327 Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.
 328
 329 ### Image caps
 330
 331 Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
 332
 333 {% example html %}
 334 <div class="card mb-3">
 335   <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
 336   <div class="card-block">
 337     <h4 class="card-title">Card title</h4>
 338     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 339     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
 340   </div>
 341 </div>
 342 <div class="card">
 343   <div class="card-block">
 344     <h4 class="card-title">Card title</h4>
 345     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 346     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
 347   </div>
 348   <img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap">
 349 </div>
 350 {% endexample %}
 351
 352 ### Image overlays
 353
 354 Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-inverse` (see below).
 355
 356 {% example html %}
 357 <div class="card card-inverse">
 358   <img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
 359   <div class="card-img-overlay">
 360     <h4 class="card-title">Card title</h4>
 361     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 362     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
 363   </div>
 364 </div>
 365 {% endexample %}
 366
 367 ## Card styles
 368
 369 Cards include various options for customizing their backgrounds, borders, and color.
 370
 371 ### Inverted text
 372
 373 By default, cards use dark text and assume a light background. You can reverse that by toggling the `color` of text within, as well as that of the card's subcomponents, with `.card-inverse`. Then, specify a dark `background-color` and `border-color` to go with it.
 374
 375 You can also use `.card-inverse` with the [contextual backgrounds variants](#background-variants).
 376
 377 {% example html %}
 378 <div class="card card-inverse" style="background-color: #333; border-color: #333;">
 379   <div class="card-block">
 380     <h3 class="card-title">Special title treatment</h3>
 381     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 382     <a href="#" class="btn btn-primary">Go somewhere</a>
 383   </div>
 384 </div>
 385 {% endexample %}
 386
 387 ### Background variants
 388
 389 Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.**
 390
 391 {% example html %}
 392 <div class="card card-inverse card-primary mb-3 text-center">
 393   <div class="card-block">
 394     <blockquote class="card-blockquote">
 395       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 396       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 397     </blockquote>
 398   </div>
 399 </div>
 400 <div class="card card-inverse card-success mb-3 text-center">
 401   <div class="card-block">
 402     <blockquote class="card-blockquote">
 403       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 404       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 405     </blockquote>
 406   </div>
 407 </div>
 408 <div class="card card-inverse card-info mb-3 text-center">
 409   <div class="card-block">
 410     <blockquote class="card-blockquote">
 411       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 412       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 413     </blockquote>
 414   </div>
 415 </div>
 416 <div class="card card-inverse card-warning mb-3 text-center">
 417   <div class="card-block">
 418     <blockquote class="card-blockquote">
 419       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 420       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 421     </blockquote>
 422   </div>
 423 </div>
 424 <div class="card card-inverse card-danger text-center">
 425   <div class="card-block">
 426     <blockquote class="card-blockquote">
 427       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 428       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 429     </blockquote>
 430   </div>
 431 </div>
 432 {% endexample %}
 433
 434 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
 435 {{ callout-include | markdownify }}
 436
 437 ### Outline cards
 438
 439 In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
 440
 441 {% example html %}
 442 <div class="card card-outline-primary mb-3 text-center">
 443   <div class="card-block">
 444     <blockquote class="card-blockquote">
 445       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 446       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 447     </blockquote>
 448   </div>
 449 </div>
 450 <div class="card card-outline-secondary mb-3 text-center">
 451   <div class="card-block">
 452     <blockquote class="card-blockquote">
 453       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 454       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 455     </blockquote>
 456   </div>
 457 </div>
 458 <div class="card card-outline-success mb-3 text-center">
 459   <div class="card-block">
 460     <blockquote class="card-blockquote">
 461       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 462       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 463     </blockquote>
 464   </div>
 465 </div>
 466 <div class="card card-outline-info mb-3 text-center">
 467   <div class="card-block">
 468     <blockquote class="card-blockquote">
 469       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 470       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 471     </blockquote>
 472   </div>
 473 </div>
 474 <div class="card card-outline-warning mb-3 text-center">
 475   <div class="card-block">
 476     <blockquote class="card-blockquote">
 477       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 478       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 479     </blockquote>
 480   </div>
 481 </div>
 482 <div class="card card-outline-danger text-center">
 483   <div class="card-block">
 484     <blockquote class="card-blockquote">
 485       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 486       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 487     </blockquote>
 488   </div>
 489 </div>
 490 {% endexample %}
 491
 492 ## Card layout
 493
 494 In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**.
 495
 496 ### Card groups
 497
 498 Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use `display: flex;` to achieve their uniform sizing.
 499
 500 {% example html %}
 501 <div class="card-group">
 502   <div class="card">
 503     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
 504     <div class="card-block">
 505       <h4 class="card-title">Card title</h4>
 506       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 507       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
 508     </div>
 509   </div>
 510   <div class="card">
 511     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
 512     <div class="card-block">
 513       <h4 class="card-title">Card title</h4>
 514       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
 515       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
 516     </div>
 517   </div>
 518   <div class="card">
 519     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
 520     <div class="card-block">
 521       <h4 class="card-title">Card title</h4>
 522       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
 523       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
 524     </div>
 525   </div>
 526 </div>
 527 {% endexample %}
 528
 529 When using card groups with footers, their content will automatically line up.
 530
 531 {% example html %}
 532 <div class="card-group">
 533   <div class="card">
 534     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
 535     <div class="card-block">
 536       <h4 class="card-title">Card title</h4>
 537       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 538     </div>
 539     <div class="card-footer">
 540       <small class="text-muted">Last updated 3 mins ago</small>
 541     </div>
 542   </div>
 543   <div class="card">
 544     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
 545     <div class="card-block">
 546       <h4 class="card-title">Card title</h4>
 547       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
 548     </div>
 549     <div class="card-footer">
 550       <small class="text-muted">Last updated 3 mins ago</small>
 551     </div>
 552   </div>
 553   <div class="card">
 554     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
 555     <div class="card-block">
 556       <h4 class="card-title">Card title</h4>
 557       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
 558     </div>
 559     <div class="card-footer">
 560       <small class="text-muted">Last updated 3 mins ago</small>
 561     </div>
 562   </div>
 563 </div>
 564 {% endexample %}
 565
 566 ### Card decks
 567
 568 Need a set of equal width and height cards that aren't attached to one another? Use card decks.
 569
 570 {% example html %}
 571 <div class="card-deck">
 572   <div class="card">
 573     <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
 574     <div class="card-block">
 575       <h4 class="card-title">Card title</h4>
 576       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 577       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
 578     </div>
 579   </div>
 580   <div class="card">
 581     <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
 582     <div class="card-block">
 583       <h4 class="card-title">Card title</h4>
 584       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
 585       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
 586     </div>
 587   </div>
 588   <div class="card">
 589     <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
 590     <div class="card-block">
 591       <h4 class="card-title">Card title</h4>
 592       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
 593       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
 594     </div>
 595   </div>
 596 </div>
 597 {% endexample %}
 598
 599 Just like with card groups, card footers in decks will automatically line up.
 600
 601 {% example html %}
 602 <div class="card-deck">
 603   <div class="card">
 604     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
 605     <div class="card-block">
 606       <h4 class="card-title">Card title</h4>
 607       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 608     </div>
 609     <div class="card-footer">
 610       <small class="text-muted">Last updated 3 mins ago</small>
 611     </div>
 612   </div>
 613   <div class="card">
 614     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
 615     <div class="card-block">
 616       <h4 class="card-title">Card title</h4>
 617       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
 618     </div>
 619     <div class="card-footer">
 620       <small class="text-muted">Last updated 3 mins ago</small>
 621     </div>
 622   </div>
 623   <div class="card">
 624     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
 625     <div class="card-block">
 626       <h4 class="card-title">Card title</h4>
 627       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
 628     </div>
 629     <div class="card-footer">
 630       <small class="text-muted">Last updated 3 mins ago</small>
 631     </div>
 632   </div>
 633 </div>
 634 {% endexample %}
 635
 636 ### Card columns
 637
 638 Cards can be organized into [Masonry](http://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.
 639
 640 **Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet.
 641
 642 {% example html %}
 643 <div class="card-columns">
 644   <div class="card">
 645     <img class="card-img-top img-fluid" data-src="holder.js/100px160/" alt="Card image cap">
 646     <div class="card-block">
 647       <h4 class="card-title">Card title that wraps to a new line</h4>
 648       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 649     </div>
 650   </div>
 651   <div class="card p-3">
 652     <blockquote class="card-block card-blockquote">
 653       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 654       <footer>
 655         <small class="text-muted">
 656           Someone famous in <cite title="Source Title">Source Title</cite>
 657         </small>
 658       </footer>
 659     </blockquote>
 660   </div>
 661   <div class="card">
 662     <img class="card-img-top img-fluid" data-src="holder.js/100px160/" alt="Card image cap">
 663     <div class="card-block">
 664       <h4 class="card-title">Card title</h4>
 665       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
 666       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
 667     </div>
 668   </div>
 669   <div class="card card-inverse card-primary p-3 text-center">
 670     <blockquote class="card-blockquote">
 671       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
 672       <footer>
 673         <small>
 674           Someone famous in <cite title="Source Title">Source Title</cite>
 675         </small>
 676       </footer>
 677     </blockquote>
 678   </div>
 679   <div class="card text-center">
 680     <div class="card-block">
 681       <h4 class="card-title">Card title</h4>
 682       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
 683       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
 684     </div>
 685   </div>
 686   <div class="card">
 687     <img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
 688   </div>
 689   <div class="card p-3 text-right">
 690     <blockquote class="card-blockquote">
 691       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 692       <footer>
 693         <small class="text-muted">
 694           Someone famous in <cite title="Source Title">Source Title</cite>
 695         </small>
 696       </footer>
 697     </blockquote>
 698   </div>
 699   <div class="card">
 700     <div class="card-block">
 701       <h4 class="card-title">Card title</h4>
 702       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
 703       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
 704     </div>
 705   </div>
 706 </div>
 707 {% endexample %}
 708
 709 Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.
 710
 711 {% highlight scss %}
 712 .card-columns {
 713   @include media-breakpoint-only(lg) {
 714     column-count: 4;
 715   }
 716   @include media-breakpoint-only(xl) {
 717     column-count: 5;
 718   }
 719 }
 720 {% endhighlight %}