saftutorials.com
Bootstrap Cards

Bootstrap Card provides a flexible and extensible content container with multiple variants and options. It makes very easy to a content box. You can use it for your blog post container very easy.

A card is a flexible content container. It includes options for headers and footers like as modal, a wide variety of content, contextual background colors, and powerful display options.

If you’re familiar with Bootstrap 3, cards replace the old panels, wells, and thumbnails.


Example of Bootstrap Card

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


Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="card" style="width: 20rem;">
 <img class="card-img-top" src="..." alt="Card image cap">
 <div class="card-body">
   <h4 class="card-title">Card title</h4>
   <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>
</body>
</html>


Bootstrap Content types

Bootstrap Cards support variety of content, like images, text, list groups, links, and more. 


Titles, text, and links

Bootstrap Card titles are used by class .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.

And Subtitles are used by class a .card-subtitle to a <h*> tag. If the class .card-title and the class .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.


Example of Titles, text, and links

Card title here

Card subtitle here

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card link Another link


Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="card" style="width: 20rem;">
 <div class="card-body">
   <h4 class="card-title">Card title</h4>
   <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
   <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   <a href="#" class="card-link">Card link</a>
   <a href="#" class="card-link">Another link</a>
 </div>
</div>
</body>
</html>


Card with Image

You can add an image in Bootstrap Card. The class of .card-img-top places an image to the top of the card. With class .card-text, text can be added to the card. Text within class .card-text can also be styled with the standard HTML tags.


Example of Card with Image

Card image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.


Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image">
  <div class="card-body">
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt.</p>
  </div>
</div>
</body>
</html>


Bootstrap List groups

You can use list group in Bootstrap Card. Create lists of content in a card with a flush list group.

  • List Item 1
  • List Item 2
  • List Item details 3

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="card" style="width: 20rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">List Item 1</li>
    <li class="list-group-item">List Item 2</li>
    <li class="list-group-item">List Item detials 3</li>
  </ul>
</div>
</body>
</html>


Bootstrap Card with Image, Link, List Group

You can use Bootstrap Card with Image, Link, List Group both in one Card


Example:

Card image cap

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • List Item 1
  • List Item 2
  • List Item details 3


Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">List Item 1</li>
    <li class="list-group-item">List Item 2</li>
    <li class="list-group-item">List Item details 3</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
</body>
</html>


Bootstrap Card Header and footer

You can add Bootstrap Card additionally Header and footer.


Example Bootstrap Header and Footer

Featured

Special title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go somewhere


Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
</body>
</html>


Bootstrap Card with Quote

You can add Quote in Bootstrap Card.


Example:

Quote

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Written by Writter Name


Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<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 adipisicing elit.</p>
      <footer class="blockquote-footer">Written by <cite title="Source Title">Writter Name</cite></footer>
    </blockquote>
  </div>
</div>
</body>
</html>



Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic