Get up to 80 % extra points for free! More info:

Lesson 11 - Bootstrap - Cards

Previous
Next

In the previous lesson, Bootstrap - List groups, we introduced list groups. In today's Bootstrap CSS framework tutorial, we'll discuss cards.

Cards

Cards are a new feature of Bootstrap 4 and act like universal containers for other HTML content. In the older versions, panels, wells and thumbnails were used for this functionality. All these 3 containers can be now created just by using cards and assigning modifier classes.

Example

Let's have a look on a code of a card often used for rendering e-shop items for example. It'll contain an image, heading, subheading, description, and a button.

<div class="card" style="width: 20rem;">
    <img class="card-img-top" src="https://www.ict.social/images/1/css/bootstrap/itnetwork_tshirt.jpg" alt="ITnetwork T-shirt">
    <div class="card-body">
        <h4 class="card-title">ITnetwork T-shirt</h4>
        <h6 class="card-subtitle mb-2 text-muted">spring-summer collection</h6>
        <p class="card-text">100% cotton programmer T-shirt for all real geeks</p>
        <a href="#" class="btn btn-primary">Add to the cart</a>
    </div>
</div>

To showcase the card, we've put a lot of items inside. In practice, it would look better with just a few of them. The result in the browser:

Cards in Bootstrap
cards.html

How else would we create a card than by creating a <div> with the .card class? By default, cards stretch to fill the full width of their parent elements, we specified the width of our card as 20 rem. Ideally, the card should be put into a grid, making its width responsive (see further). In the same way we can also use utility classes such as .w-50 for a 50% width.

For the image we used the .card-img-top class. If we wanted to place the image at the bottom, we'd assign the .card-img-bottom class. The last <div> has the .card-body class and can contain any HTML contents of the card. Notice that the heading has the card-title class assigned and the subtitle has the .card-subtitle class with some other classes for the margin and color. The paragraph with the text has the .card-text class.

Card with only .card-body

We can create simple cards just by using <div>s with the .card and .card-body classes. We can use standard background and text utilities to style them.

Cards in Bootstrap
cards_backgrou­nd.html

As always when using the color utilities, we should also provide a <span> with the .sr-only class containing information about the color meaning for screen readers.

Using border utilities we can modify the border as well, which is useful to highlight the card slightly:

Cards in Bootstrap
cards_backgrou­nd.html

Header/footer, list groups and links

Cards in the Bootstrap framework are really very powerful helpers. In the following example, we're going to show how to define the header or footer of a card and how to put a list group and links inside.

<div class="card" style="width: 20rem;">
    <h4 class="card-header">
        John Smith
    </h4>
    <ul class="list-group list-group-flush">
        <li class="list-group-item active">Events</li>
        <li class="list-group-item">News</li>
        <li class="list-group-item">Articles</li>
        <li class="list-group-item disabled">Auctions</li>
    </ul>
    <div class="card-body">
        <a href="#" class="card-link">Link 1</a>
        <a href="#" class="card-link">Link 2</a>
    </div>
</div>

We define the header of the card using an element with the .card-header class. Instead of the <h4> element, we could also use <div>. Such a header could then contain any HTML content as you like and would still have a gray background. To the list group, we assign the list-group-flush class causing the list-group's corners not being rounded. We provide links with the .card-link class which adds the right margin to the links so that they can be easily put next to each other.

The result in the browser:

Cards in Bootstrap
cards_more_ele­ments.html

Of course, we can combine the contents with everything we have learned to use earlier (images, heading, ...). We would also add a footer in a similar way; by adding the <div> element at the end of the card and assigning the .card-footer class to it.

Using the grid

Cards can be put into a responsive grid. Since they stretch to fill the whole parent element, they adapt nicely and wrap exactly as we defined the grid.

<div class="row">
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card 1</h4>
                <p class="card-text">A card put inside a responsive grid. Try to reduce the window size and watch it wrap.</p>
                <a href="#" class="btn btn-primary">Button</a>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card 2</h4>
                <p class="card-text">A card put inside a responsive grid. Try to reduce the window size and watch it wrap.</p>
                <a href="#" class="btn btn-primary">Button</a>
            </div>
        </div>
    </div>
</div>

The result:

Cards in Bootstrap
cards_grid.html

We'll learn about the grid in detail further in the course, then you can return back here and try out its other functionality with cards inside.

Navigation

The next thing we're going to look at is the navigation, which we're yet about to learn. Bootstrap components are related in different ways and that's why it's impossible to explain them independently in the course. But that doesn't mind, let's see how to put a navigation bar inside the card's header and we'll explain the rest later.

<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="#">Inactive</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <h4 class="card-title">Heading</h4>
        <p class="card-text">The card contents.</p>
    </div>
</div>

The result:

Cards in Bootstrap
cards_navigati­on.html

For alternate looks where there are buttons instead of tabs, we can use classes .nav-pills and .card-header-pills. We must also remove classes .nav-tabs and .card-header-tabs.

The result:

Cards in Bootstrap
cards_navigati­on_pills.html

Image background

Thanks to the support of image overlays we can also add an image background to the card. However, we won't add it as an background image but rather as the <img> element with the .card-img class. Other contents of the card will be rendered over the image as an overlay using the .card-img-overlay class.

<div class="card text-white" style="text-shadow: black 0px 0px 5px;">
    <img class="card-img" src="https://www.ict.social/images/1/css/bootstrap/background_woods.jpeg" alt="Woods">
    <div class="card-img-overlay" style="text-shadow: black 0px 0px 5px;">
        <h4 class="card-title">Do you rest from time to time?</h4>
        <p class="card-text">Do you know you can rest from information technology by going to woods? :)</p>
    </div>
</div>

The result:

Cards in Bootstrap
cards_overlay.html

We can use colors both in the header and in the footer. If we wanted the header or the footer to be transparent, we can use the .bg-transparent class.

Layouts

Next to creating layouts using the grid, Bootstrap has also prepared card groups for us. Unlike in the grid, these cards are tightly sticked one to another. It's probably not worth mentioning that the result is fully responsive. If you reduce the size of your window so the cards don't fit next to each other anymore, they start to align underneath.

<div class="card-group">
    <div class="card">
        <img class="card-img-top" src="https://www.ict.social/images/1/css/bootstrap/background_woods.jpeg" alt="Woods">
        <div class="card-body">
            <h4 class="card-title">Woods</h4>
            <p class="card-text">Do you know you can rest from information technology by going to woods? :) Bear Mountain State Park is very pretty.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Sep 21</small>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="https://www.ict.social/images/1/css/bootstrap/background_desert.jpeg" alt="Desert">
        <div class="card-body">
            <h4 class="card-title">Desert</h4>
            <p class="card-text">This card is very short.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Nov 12</small>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="https://www.ict.social/images/1/css/bootstrap/background_lake.jpeg" alt="Lake">
        <div class="card-body">
            <h4 class="card-title">Lake</h4>
            <p class="card-text">Lakes are very common in poetry, probably for the feelings based upon the calm large surface of the water. It's no coincidence that there are many lakes named after famous poets, let's take Karel Macha as an example.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Feb 6</small>
        </div>
    </div>
</div>

The result:

Cards in Bootstrap
cards_groups.html

Notice that the footers aligned next to each other even though every card has actually a different height. What more could a web designer ask for? :)

Next to the .card-group class, we can use .card-deck as well. Cards wouldn't be so close to each other that way.

Walls

Do you have many cards of different heights, e.g. photos, and would you like to render them as a wall such as you can see on Google+? This feature is probably one of the best in Bootstrap, well, judge it for yourself.

We'll wrap all the cards in the <div> element with the .card-columns class. Then instead of the flex box, CSS columns will be used to create the layout. The items align from top to bottom and from left to right. Meaning the second item is still in the first column, etc.

<div class="card-columns">
    <div class="card">
        <img class="card-img-top" src="https://www.ict.social/images/1/css/bootstrap/background_woods.jpeg" alt="Woods">
        <div class="card-body">
            <h4 class="card-title">Woods</h4>
            <p class="card-text">Do you know you can rest from information technology by going to woods? :) Bear Mountain State Park is very pretty.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Sep 21</small>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="https://www.ict.social/images/1/css/bootstrap/itnetwork_tshirt.jpg" alt="ITnetwork T-shirt">
        <div class="card-body">
            <h4 class="card-title">ITnetwork T-shirt</h4>
            <p class="card-text">100% cotton programmer T-shirt for all real geeks</p>
            <a href="#" class="btn btn-primary">Add to cart</a>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="https://www.ict.social/images/1/css/bootstrap/background_desert.jpeg" alt="Desert">
        <div class="card-body">
            <h4 class="card-title">Desert</h4>
            <p class="card-text">This card is very short.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Nov 12</small>
        </div>
    </div>
    <div class="card bg-danger text-white">
        <div class="card-body">
            Never put variables directly into SQL queries without escaping!
        </div>
    </div>
    <div class="card border-success">
        <div class="card-body text-success">
            <h4 class="card-title">Paid amount</h4>
            100% paid
        </div>
    </div>
    <div class="card">
        <h4 class="card-header">
            John Smith
        </h4>
        <ul class="list-group list-group-flush">
            <li class="list-group-item active">Events</li>
            <li class="list-group-item">News</li>
            <li class="list-group-item">Articles</li>
            <li class="list-group-item disabled">Auctions</li>
        </ul>
        <div class="card-body">
            <a href="#" class="card-link">Link 1</a>
            <a href="#" class="card-link">Link 2</a>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="https://www.ict.social/images/1/css/bootstrap/background_lake.jpeg" alt="Jezero">
        <div class="card-body">
            <h4 class="card-title">Lake</h4>
            <p class="card-text">Lakes are very common in poetry, probably for the feelings based upon the calm large surface of the water. It's no coincidence that there are many lakes named after famous poets, let's take Karel Macha as an example.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Feb 6</small>
        </div>
    </div>
</div>

Result in browser:

Cards in Bootstrap
cards_walls.html

In the next lesson, Bootstrap - Carousels and Progress, we'll focus on the carousel and progress components.


 

Previous article
Bootstrap - List groups
All articles in this section
Bootstrap
Skip article
(not recommended)
Bootstrap - Carousels and Progress
Article has been written for you by David Capka Hartinger
Avatar
User rating:
No one has rated this quite yet, be the first one!
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.
Activities