]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
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 %} |