Examples

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.

								
									<div class="card" style="width: 18rem;">
										<img class="card-img-top" src="..." alt="Card image cap">
										<div class="card-body">
											<h5 class="card-title mb-2 fw-mediumbold">Card title</h5>
											<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>
											<a href="#" class="btn btn-warning">Go somewhere</a>
										</div>
									</div>
								
							

Content types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

								
									<div class="card">
										<div class="card-body">
											This is some text within a card body.
										</div>
									</div>
								
							

Titles, text, and links

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 an <a> tag.

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-body item, the card title and subtitle are aligned nicely.

								
									<div class="card-body">
										<h5 class="card-title mb-3">Card title</h5>
										<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
										<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>
										<a href="#" class="card-link">Card link</a>
										<a href="#" class="card-link">Another link</a>
									</div>
								
							

Images

.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.

								
									<div class="card" style="width: 18rem;">
										<img class="card-img-top" src="/assets/img/blogpost.jpg" alt="Card image cap">
										<div class="card-body">
											<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>
										</div>
									</div>
								
							

List groups

Create lists of content in a card with a flush list group.

								
									<div class="card" style="width: 18rem;">
										<ul class="list-group list-group-flush">
											<li class="list-group-item">Cras justo odio</li>
											<li class="list-group-item">Dapibus ac facilisis in</li>
											<li class="list-group-item">Vestibulum at eros</li>
										</ul>
									</div>
								
							

								
									<div class="card" style="width: 18rem;">
										<div class="card-header">
											Featured
										</div>
										<ul class="list-group list-group-flush">
											<li class="list-group-item">Cras justo odio</li>
											<li class="list-group-item">Dapibus ac facilisis in</li>
											<li class="list-group-item">Vestibulum at eros</li>
										</ul>
									</div>
								
							

Kitchen sink

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.

								
									<div class="card" style="width: 18rem;">
										<img class="card-img-top" src="/assets/img/blogpost.jpg" alt="Card image cap">
										<div class="card-body">
											<h5 class="card-title">Card title</h5>
											<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>
										</div>
										<ul class="list-group list-group-flush">
											<li class="list-group-item">Cras justo odio</li>
											<li class="list-group-item">Dapibus ac facilisis in</li>
											<li class="list-group-item">Vestibulum at eros</li>
										</ul>
										<div class="card-body">
											<a href="#" class="card-link">Card link</a>
											<a href="#" class="card-link">Another link</a>
										</div>
									</div>
								
							

Header and footer

Add an optional header and/or footer within a card.

								
									<div class="card">
										<div class="card-header">
											Featured
										</div>
										<div class="card-body">
											<h5 class="card-title">Special title treatment</h5>
											<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
											<a href="#" class="btn btn-primary">Go somewhere</a>
										</div>
									</div>
								
							

Card headers can be styled by adding .card-header to <h*> elements.

								
									<div class="card">
										<h5 class="card-header">Featured</h5>
										<div class="card-body">
											<h5 class="card-title">Special title treatment</h5>
											<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
											<a href="#" class="btn btn-primary">Go somewhere</a>
										</div>
									</div>
								
							

								
									<div class="card">
										<div class="card-header">
											Quote
										</div>
										<div class="card-body">
											<blockquote class="blockquote mb-0">
											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
											<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
											</blockquote>
										</div>
									</div>
								
							

								
									<div class="card text-center">
										<div class="card-header">
											Featured
										</div>
										<div class="card-body">
											<h5 class="card-title">Special title treatment</h5>
											<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
											<a href="#" class="btn btn-primary">Go somewhere</a>
										</div>
										<div class="card-footer text-muted">
											2 days ago
										</div>
									</div>
								
							

Text alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.

								
									<div class="card" style="width: 20rem;">
										<div class="card-body">
											<h4 class="card-title">Special title treatment</h4>
											<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
											<a href="#" class="btn btn-primary">Go somewhere</a>
										</div>
									</div>

									<div class="card text-center" style="width: 20rem;">
										<div class="card-body">
											<h4 class="card-title">Special title treatment</h4>
											<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
											<a href="#" class="btn btn-primary">Go somewhere</a>
										</div>
									</div>

									<div class="card text-right" style="width: 20rem;">
										<div class="card-body">
											<h4 class="card-title">Special title treatment</h4>
											<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
											<a href="#" class="btn btn-primary">Go somewhere</a>
										</div>
									</div>
								
							

Navigation

Add some navigation to a card’s header (or block) with Bootstrap’s nav components.

								
									<div class="card text-center">
										<div class="card-header">
											<ul class="nav nav-tabs card-header-tabs">
												<li class="nav-item">
												<a class="nav-link active" href="#">Active</a>
												</li>
												<li class="nav-item">
												<a class="nav-link" href="#">Link</a>
												</li>
												<li class="nav-item">
												<a class="nav-link disabled" href="#">Disabled</a>
												</li>
											</ul>
										</div>
										<div class="card-body">
											<h5 class="card-title">Special title treatment</h5>
											<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
											<a href="#" class="btn btn-primary">Go somewhere</a>
										</div>
									</div>
								
							

								
									<div class="card text-center">
										<div class="card-header">
										<ul class="nav nav-pills nav-primary card-header-pills">
											<li class="nav-item">
											<a class="nav-link active" href="#">Active</a>
											</li>
											<li class="nav-item">
											<a class="nav-link" href="#">Link</a>
											</li>
											<li class="nav-item">
											<a class="nav-link disabled" href="#">Disabled</a>
											</li>
										</ul>
										</div>
										<div class="card-body">
											<h5 class="card-title">Special title treatment</h5>
											<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
											<a href="#" class="btn btn-primary">Go somewhere</a>
										</div>
									</div>
								
							

Images

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.

Image caps

Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.

								
									<div class="card mb-3">
										<img class="card-img-top" src="https://via.placeholder.com/780x180" alt="Card image cap">
										<div class="card-body">
											<h5 class="card-title">Card title</h5>
											<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>
											<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
										</div>
									</div>
									
									<div class="card">
										<div class="card-body">
											<h5 class="card-title">Card title</h5>
											<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>
											<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
										</div>
										<img class="card-img-bottom" src="https://via.placeholder.com/780x180" alt="Card image cap">
									</div>
								
							

Image overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

								
									<div class="card bg-dark text-white">
										<img class="card-img" src="https://via.placeholder.com/780x180" alt="Card image">
										<div class="card-img-overlay">
											<h5 class="card-title text-white">Card title</h5>
											<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>
											<p class="card-text">Last updated 3 mins ago</p>
										</div>
									</div>