1. Home
  2. Startup
  3. How to Use Cards on Your Startup Template

How to Use Cards on Your Startup Template

You can use a Bootstrap Card to present content on your Startup website. Cards are flexible and extensible content containers. They can be used to display different content like text, images, links, buttons, etc. Cards have a flexible structure and offer different options that you can add to your card like headers, footers, navigation, etc.

Creating a Card

You create a card with a .card element. Below, we create a card with mixed content (image, text and button). Cards have no fixed width by default, so they fill up the width of their parent element. We add a style to the card that gives it a fixed width.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card" style="width: 18rem;">
          <img src="https://source.unsplash.com/xAgvgQpYsf4/286x186" class="card-img-top" alt="Image in card">
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus nobis tempora amet ipsa molestiae.</p>
            <a href="#" class="btn action-2 card-button">Click Me</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

You can see the card below:

How to Use Cards on Your Startup Template

The card has a .card-body that holds it’s main content, .card-title for its title and .card-text for its text.

Note that the code surrounding the .card div is only there to position elements in the Startup template. It provides a container for the content we’ll add; the relevant card markup is inside the container. If you want to find out more about the classes used, check out our classes guide.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        ...
      </div>
    </div>
  </div>
</section>

By default, the Startup template buttons are a little more rounded than the Bootstrap buttons:

Startup button

To get the Button you see in the card shown above, that is closer in shape to the Bootstrap ones, we added the class card-button to it and added the following CSS to the css/style.css file.

.card-button {
  border-radius: .25rem;
}

Horizontal Card

You can make horizontal, mobile-friendly, responsive cards by using a combination of grid and utility classes.

Below, we create a card that is vertical below the md breakpoint and horizontal starting at the md breakpoint.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card mb-3" style="max-width: 540px;">
          <div class="row no-gutters">
            <div class="col-md-4">
              <img src="https://source.unsplash.com/uMVyQ4styps/180x249" class="card-img" alt="Image in card">
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, est earum saepe nisi excepturi ut dicta repudiandae! Hic ut, aspernatur repellendus tenetur quia maiores.</p>
                <p class="card-text"><small class="text-muted">Updated 3 mins ago</small></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

You can see the card below.

Horizontal card

Card Structure

A card can have different parts: header, body and footer. Let’s look at each one.

Card Body

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

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        <div class="card">
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Below is the card with only a .card-body.

Card body

Card Header

You can add a header to a card. You can add one by adding .card-header to <h*> elements as shown below.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        <div class="card">
          <h5 class="card-header">Header Text</h5>
          <div class="card-body">
            <h5 class="card-title">Cart Title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem placeat consequatur, maxime illo iusto est saepe nulla voluptatibus mollitia rem fuga deleniti nihil aut. Mollitia harum quae nisi. Fugit, laboriosam.</p>
            <a href="#" class="btn action-2 card-button">Click Me</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

You can see the header is distinguishable from the rest of the card content:

Card header

You can also create a header with a <div> that has the card-header class.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        <div class="card">
          <div class="card-header">
            Header Text
          </div>
          <div class="card-body">
            <h5 class="card-title">Cart Title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quae qui similique aspernatur non iste deserunt quidem odit ea? Incidunt reiciendis ut molestias animi libero deleniti labore, laborum quae quas?</p>
            <a href="#" class="btn action-2 card-button">Click Me</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Card header 2

You can add a footer to a card with a .card-footer element.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        <div class="card">
          <h5 class="card-header">Header Text</h5>
          <div class="card-body">
            <h5 class="card-title">Cart Title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem placeat consequatur, maxime illo iusto est saepe nulla voluptatibus mollitia rem fuga deleniti nihil aut. Mollitia harum quae nisi. Fugit, laboriosam.</p>
            <a href="#" class="btn action-2 card-button">Click Me</a>
          </div>
          <div class="card-footer text-muted">
            Updated 3 days ago
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

The card now has a distinguishable footer. Note that the footer text isn’t light gray because that is the styling of footer text, but it’s because of the text-muted class that we added to the footer.

Card footer

Supported Content Type

Now let’s look at the various content type that a card can hold.

Below we have a card with a title (card-title), a subtitle (card-subtitle), text (card-text) and some links (card-link).

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem placeat consequatur, maxime illo iusto.</p>
            <a href="#" class="card-link">Link</a>
            <a href="#" class="card-link">Another Link</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

The resulting card:

Titles text links

Images

Cards can display images. Below, we add an image to a card, followed by the card body, which holds some text.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card" style="width: 18rem;">
          <img src="https://source.unsplash.com/juHayWuaaoQ/286x191" class="card-img-top" alt="Card image">
          <div class="card-body">
            <p class="card-text">Quidem placeat consequatur, maxime illo iusto. Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

The image appears above the main card content:

Images top

Below, we add the image below the card body.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card" style="width: 18rem;">
          <div class="card-body">
            <p class="card-text">Quidem placeat consequatur, maxime illo iusto. Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
          </div>
          <img src="https://source.unsplash.com/juHayWuaaoQ/286x191" class="card-img-bottom" alt="Card image">
        </div>
      </div>
    </div>
  </div>
</section>

Now the image appears below the main content.

Images bottom

Note the card-img-top and card-img-bottom classes added to the images. card-img-top gives the image a width of 100% and makes its top corners rounded while card-img-bottom does a similar thing, except it is the image’s bottom corners that get rounded.

Image Overlays

You can turn an image into a card background and overlay your card’s text.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card bg-dark text-white">
          <img src="https://source.unsplash.com/i2KibvLYjqk/1000x300" class="card-img" alt="Card image">
          <div class="card-img-overlay">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quia enim sequi minus. Numquam unde aliquid quisquam error assumenda facilis.</p>
            <p class="card-text">Updated 3 mins ago</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

.card-img gives the image a width of 100% and rounds its corners. .card-img-overlay holds the content that will be on the foreground.

Now the card has a background image with some text in the foreground.

Image overlays

Below, we center the text by adding text-center to .card.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card bg-dark text-white text-center">
          <img src="https://source.unsplash.com/i2KibvLYjqk/1000x300" class="card-img" alt="Card image">
          <div class="card-img-overlay">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quia enim sequi minus. Numquam unde aliquid quisquam error assumenda facilis.</p>
            <p class="card-text">Updated 3 mins ago</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Image overlays 2

List Groups

You can create lists of content in a card with a flush list group. A flush list group is a list group with no borders.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card" style="width: 18rem;">
          <div class="card-header">
            Items
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">Voluptatem quia</li>
            <li class="list-group-item">Numquam unde</li>
            <li class="list-group-item">Sit amet consectetur</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

The list of items is shown below:

List groups

Card Layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out a series of cards.

Card Groups

You can use card groups to render cards as a single, attached element with equal width and height columns. To group cards, place them inside a .card-group element.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card-group">
          <div class="card">
            <img src="https://source.unsplash.com/juHayWuaaoQ/330x216" class="card-img-top" alt="Card 1 image">
            <div class="card-body">
              <h5 class="card-title">Card Title</h5>
              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis tempore a quos, dicta ipsa perferendis vitae illum nisi.</p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Updated 7 mins ago</small>
            </div>
          </div>
          <div class="card">
            <img src="https://source.unsplash.com/eWFdaPRFjwE/330x216" class="card-img-top" alt="Card 2 image">
            <div class="card-body">
              <h5 class="card-title">Card Title</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam fugit sed, ut, repellat.</p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Updated 2 mins ago</small>
            </div>
          </div>
          <div class="card">
            <img src="https://source.unsplash.com/BPbfAiOw9so/330x216" class="card-img-top" alt="Card 3 image">
            <div class="card-body">
              <h5 class="card-title">Card Title</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus blanditiis unde ipsum corrupti earum dolor illo praesentium asperiores nulla fuga, quam dolorum magni esse dolorem sapiente perspiciatis, inventore enim.</p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Updated 3 mins ago</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Below is the card group

Card groups

When using card groups with footers, their content automatically lines up as shown above. Below, you can see what you would get if the cards didn’t have footers:

Card groups 2

Card Decks

Use card decks for a set of equal width and height cards that aren’t attached to one another. To create a card deck, you wrap cards in a .card-deck.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card-deck">
          <div class="card">
            <img src="https://source.unsplash.com/juHayWuaaoQ/330x216" class="card-img-top" alt="Card 1 image">
            <div class="card-body">
              <h5 class="card-title">Card Title</h5>
              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis tempore a quos, dicta ipsa perferendis vitae illum nisi.</p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Updated 7 mins ago</small>
            </div>
          </div>
          <div class="card">
            <img src="https://source.unsplash.com/eWFdaPRFjwE/330x216" class="card-img-top" alt="Card 2 image">
            <div class="card-body">
              <h5 class="card-title">Card Title</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam fugit sed, ut, repellat.</p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Updated 2 mins ago</small>
            </div>
          </div>
          <div class="card">
            <img src="https://source.unsplash.com/BPbfAiOw9so/330x216" class="card-img-top" alt="Card 3 image">
            <div class="card-body">
              <h5 class="card-title">Card Title</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus blanditiis unde ipsum corrupti earum dolor illo praesentium asperiores nulla fuga, quam dolorum magni esse dolorem sapiente perspiciatis, inventore enim.</p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Updated 3 mins ago</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Card decks

Just like with card groups, card footers in decks will automatically line up.

Card Columns

You can organize cards into Masonry-like columns by wrapping them in .card-columns. The cards are ordered from top to bottom and left to right.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card-columns">
          <div class="card">
            <img src="https://source.unsplash.com/juHayWuaaoQ/330x216" class="card-img-top" alt="Card image">
            <div class="card-body">
              <h5 class="card-title">Long card title that wraps to a new line</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consec adipisicing elit. Voluptatibus blanditiis unde ipsum corrupti earum dolor illo.</p>
            </div>
          </div>
          <div class="card p-3">
            <blockquote class="blockquote mb-0 card-body">
              <p>Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering.</p>
              <footer class="blockquote-footer">
                <small class="text-muted">
                  Yoda
                </small>
              </footer>
            </blockquote>
          </div>
          <div class="card">
            <img src="https://source.unsplash.com/eWFdaPRFjwE/330x216" class="card-img-top" alt="Card image">
            <div class="card-body">
              <h5 class="card-title">Card Title</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consec adipisicing elit. Voluptatibus blanditiis unde.</p>
              <p class="card-text"><small class="text-muted">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>Nitwit! Blubber! Oddment! Tweak!</p>
              <footer class="blockquote-footer text-white">
                <small>
                  Albus Dumbledore
                </small>
              </footer>
            </blockquote>
          </div>
          <div class="card text-center">
            <div class="card-body">
              <h5 class="card-title">Card Title</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consec adipisicing elit amet si elit.</p>
              <p class="card-text"><small class="text-muted">Updated 5 mins ago</small></p>
            </div>
          </div>
          <div class="card">
            <img src="https://source.unsplash.com/BPbfAiOw9so/330x216" class="card-img-top" alt="Card image">
          </div>
          <div class="card p-3 text-right">
            <blockquote class="blockquote mb-0">
              <p>The problem with internet quotes is that you can't always depend on their accuracy.</p>
              <footer class="blockquote-footer">
                <small class="text-muted">
                  Abraham Lincoln, 1864
                </small>
              </footer>
            </blockquote>
          </div>
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card Title</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consec adipisicing elit. Temporibus lauda officia laboriosam nemo sapiente nostrum architecto.</p>
              <p class="card-text"><small class="text-muted">Updated 7 mins ago</small></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Here’s the resulting card columns:

Card columns

Add Navigation to a Card’s Header

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

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <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="#" tabindex="-1" aria-disabled="true">Disabled</a>
              </li>
            </ul>
          </div>
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet consec adipisicing elit. Temporibus lauda officia laboriosam nemo sapiente nostrum.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

The above code created a tabbed navigation as shown:

Card navigation

Instead of using Tabs, you can choose to have the navigation links appear as Pills.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card text-center">
          <div class="card-header">
            <ul class="nav nav-pills 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
              </li>
            </ul>
          </div>
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet consec adipisicing elit. Temporibus lauda officia laboriosam nemo sapiente nostrum.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

The result can be seen below:

Card navigation 2
Updated on June 8, 2020
Was this article helpful?

Related Articles