Cards

Thedir 's cards provide a flexible and extensible content container with multiple variants and options.

About #

A card is a flexible and extensible Bootstrap content container. Thedir has taken the advantage of Bootstrap's Cards and created more classes to make easier to control them on various circumstances.

Example #

Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere 
<div class="card" style="width: 18rem;">
    <img class="card-img-top"
            src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16f4a3ab032%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16f4a3ab032%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
	       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>
        <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.

Card image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap 
<div class="card mb-3">
																			    <img class="card-img-top"
																			         src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22780%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20780%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16f4a3ab03e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A39pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16f4a3ab03e%22%3E%3Crect%20width%3D%22780%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22290.234375%22%20y%3D%22107.4%22%3E780x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
																			         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="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22780%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20780%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16f4a3ab03e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A39pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16f4a3ab03e%22%3E%3Crect%20width%3D%22780%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22290.234375%22%20y%3D%22107.4%22%3E780x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
																			         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.

Card image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<div class="card bg-dark text-white">
																			  <img class="card-img" src="..." alt="Card image">
																			  <div class="card-img-overlay">
																			    <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">Last updated 3 mins ago</p>
																			  </div>
																			</div>

Card styles #

Cards include various options for customizing their backgrounds, borders, and color.

Background and color #

Use text and background utilities to change the appearance of a card.

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
																			  <div class="card-header">Header</div>
																			  <div class="card-body">
																			    <h5 class="card-title text-white">Primary 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>
																			</div>
																			<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
																			  <div class="card-header">Header</div>
																			  <div class="card-body">
																			    <h5 class="card-title text-white">Secondary 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>
																			</div>
																			<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
																			  <div class="card-header">Header</div>
																			  <div class="card-body">
																			    <h5 class="card-title text-white">Success 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>
																			</div>
																			<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
																			  <div class="card-header">Header</div>
																			  <div class="card-body">
																			    <h5 class="card-title text-white">Danger 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>
																			</div>
																			<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
																			  <div class="card-header">Header</div>
																			  <div class="card-body">
																			    <h5 class="card-title text-white">Warning 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>
																			</div>
																			<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
																			  <div class="card-header">Header</div>
																			  <div class="card-body">
																			    <h5 class="card-title text-white">Info 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>
																			</div>
																			<div class="card bg-light mb-3" style="max-width: 18rem;">
																			  <div class="card-header">Header</div>
																			  <div class="card-body">
																			    <h5 class="card-title">Light 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>
																			</div>
																			<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
																			  <div class="card-header">Header</div>
																			  <div class="card-body">
																			    <h5 class="card-title text-white">Dark 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>
																			</div>

Mixins utilities #

You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer 
<div class="card border-success mb-3" style="max-width: 18rem;">
																			  <div class="card-header bg-transparent border-success">Header</div>
																			  <div class="card-body text-success">
																			    <h5 class="card-title">Success 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>
																			  <div class="card-footer bg-transparent border-success">Footer</div>
																			</div>

Card layout #

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.

Card groups #

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.

Card image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap
Card title

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.

Last updated 3 mins ago 

<div class="card-group">
																		  <div class="card">
																		    <img class="card-img-top" src="..." 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">
																		    <img class="card-img-top" src="..." alt="Card image cap">
																		    <div class="card-body">
																		      <h5 class="card-title">Card title</h5>
																		      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
																		      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
																		    </div>
																		  </div>
																		  <div class="card">
																		    <img class="card-img-top" src="..." 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 card has even longer content than the first to show that equal height action.</p>
																		      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
																		    </div>
																		  </div>
																		</div>

Card decks #

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

Card image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap
Card title

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.

Last updated 3 mins ago 

<div class="card-deck">
																		  <div class="card">
																		    <img class="card-img-top" src="..." alt="Card image cap">
																		    <div class="card-body">
																		      <h5 class="card-title">Card title</h5>
																		      <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>
																		      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
																		    </div>
																		  </div>
																		  <div class="card">
																		    <img class="card-img-top" src="..." alt="Card image cap">
																		    <div class="card-body">
																		      <h5 class="card-title">Card title</h5>
																		      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
																		      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
																		    </div>
																		  </div>
																		  <div class="card">
																		    <img class="card-img-top" src="..." 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 card has even longer content than the first to show that equal height action.</p>
																		      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
																		    </div>
																		  </div>
																		</div>

Card columns #

Cards can be organized into Masonry -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.

Card image cap
Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

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.

Last updated 3 mins ago

<div class="card-columns">
													  <div class="card">
													    <img class="card-img-top" src="..." alt="Card image cap">
													    <div class="card-body">
													      <h5 class="card-title">Card title that wraps to a new line</h5>
													      <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>
													    </div>
													  </div>
													  <div class="card p-3">
													    <blockquote class="blockquote mb-0 card-body">
													      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
													      <footer class="blockquote-footer">
													        <small class="text-muted">
													          Someone famous in <cite title="Source Title">Source Title</cite>
													        </small>
													      </footer>
													    </blockquote>
													  </div>
													  <div class="card">
													    <img class="card-img-top" src="..." alt="Card image cap">
													    <div class="card-body">
													      <h5 class="card-title">Card title</h5>
													      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
													      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
													    </div>
													  </div>
													  <div class="card bg-primary text-white text-center p-3">
													    <blockquote class="blockquote mb-0">
													      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
													      <footer class="blockquote-footer">
													        <small>
													          Someone famous in <cite title="Source Title">Source Title</cite>
													        </small>
													      </footer>
													    </blockquote>
													  </div>
													  <div class="card text-center">
													    <div class="card-body">
													      <h5 class="card-title">Card title</h5>
													      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
													      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
													    </div>
													  </div>
													  <div class="card">
													    <img class="card-img" src="..." alt="Card image">
													  </div>
													  <div class="card p-3 text-right">
													    <blockquote class="blockquote mb-0">
													      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
													      <footer class="blockquote-footer">
													        <small class="text-muted">
													          Someone famous in <cite title="Source Title">Source Title</cite>
													        </small>
													      </footer>
													    </blockquote>
													  </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 card has even longer content than the first to show that equal height action.</p>
													      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
													    </div>
													  </div>
													</div>
Previous Buttons
Next Collapse