Cards offer a modular way of presenting content. These 'content containers' can be easily repositioned for different screenssizes. As we will see below this can even be done automagically, without media queries, thanks to flexbox.

Card have options to include headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Cards replace the panels, wells, and thumbnails from Bootstrap 3. Similar functionality to those components is available as modifier classes for cards.

Cards are created with the card class on a container element. Most inner elements also use a class that includes the word ‘card’. In the example below the image uses card-img-top.

What follows in one more container with the class card-block and two text elements using the card-title and card-text class respectively.

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Click me

Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create custom cards.

Responsive Apps

Did you know that CoffeeCup also created Foundation Framer? That app works with the Foundation 6 framework and..

• Is totally awesome (as well…)
• Includes The Toggle — Yay!
• Animates interactions with Motion UI.

Learn moreBuy now

The second example above includes a list group and two text link elements using the card-link class.

A list group is made with the Unordered List element with classes list-group and list-group-flush.

To create subtitles the class card-subtitle can be added to an header element. The class text-muted gives the subdued effect.

To create the proper separation and alignment two ‘card blocks’ are used below.

In the example below the cards are placed in two different columns of a subgrid. Below the first breakpoint the columns have a span width of 12. With each column taking up the full width they stack.

Then, on the right of that breakpoint, the columns get a span width of 6. Now each column takes up half of the grid so the columns, and cards within them, are positioned next to each other. 

The width of (subgrid) columns is managed on the Layout pane.

Since the subgrids add extra padding, the padding on the (parent) column has been removed. This makes the cards line up better with the paragraphs (yup, this one included!) above them.

The above example can be extended with more subgrid columns. In the example below the three columns continue to take up the full width (12 spans) until the second breakpoint. At that point each column gets a span-width of 4, therefore taking up a third of the width.

In this example, the width of each of the cards is also constrained to 400px. The class card-sm has been added and, with the other classes deselected, a maximum width specified in the dimensions section on the Design pane.

In the example below the three cards are placed in the same column. This column is instructed to display its children — the cards — as flex-items. Specifically, they are told to display as a row, but if there’s not enough room to wrap down to the next line.

Now, if there is enough room, the cards will display next to each other. When there is not enough room, the cards will wrap. So at display widths of over 900px (plus any added margin) the cards will display next to each other. Below that initially one card will wrap and at smaller sizes all three cards will be stacked. 

The cards get a new class, card-flex, adding a few flex properties and a bit of margin to set them apart. The flex-basis (to be found under the flexbox section on the Design pane) is set to 300px, instructing the cards to take up a width of 300px. 

At widths below the target value of 300px we would like them to shrink, a flex-shrink value of 1 will take care of that. It would also be nice if they take up any left-over space. This, for example, creates a neat balanced effect when a single card wraps. This is achieved by also setting the flex-grow value to 1. In case the cards are not supposed to grow any wider than the specified value, simply set the value back to 0.

What we have created is a ‘flexible card layout’ that automatically adjusts to any display width. Without media queries — how cool is that!

This construct works in all browser, except, in IE 10 and below the cards will remain stacked all the time.

It’s a rare occasion where these cards will all hold the exact same content. Using multiple cards with variable text lenghts could easily result in unbalanced height variations and button placements. 

The above screenshot from the Bootstrap documentation — with extra text added — illustrates the point. Adding an extra paragraph to the previous (flexbox) example will yield a slightly better result. The cards will maintain the same height, but the buttons will still be all over the place.

Also here Flexbox provides a great solution to the problem. In the example below the flex parent (the column) gets the class flex-cards-height. The class is used to set the flex-direction to column below the first breakpoint. This gives all cards the same height when stacked as well.

Each of the cards containers now have a new class as well. The card-height class is used to make the card a flex container, displaying its children in a column. Now the last paragraph can be instructed to take up any extra available space, pushing the button down to the bottom of the card. The flex-card-item class is used for this. Problem solved

The alignment of all card items can be set with a single class on the card container. In the card in the middle below the text-xs-center class centers all elements starting at the smallest (xs) display width.

In a similar way the text-xs-right class aligns everything to the right in the last container.

Variations can be used to specify alignment for different viewport sizes. For example, adding text-md-right wouldThe alignment of card items can be set with the Bootstrap 4 text align classes. In the card in the middle below the text-xs-center class centers all elements starting at the smallest (xs) display width.

Headers and footer can be added both through a container, or directly, using the class card-header and card-footer respectively.

In the example below the text header is added directly (without container wrapper) to the card. The footer does use a container wrapper. 

Please note that these examples continue to build upon the Flexbox card structure. This is slightly different from the examples in the official Bootstrap 4 docs but, in our humble opinion, lead to better results.

A navigation component can be added into the card header. In the first example an unordered list element that functions as the navigation gets the card-header-pills class. This is in addition to the other classes such as nav and nav-pills that are used to create the navigation component — please check the Navs page for more information about this component.

A tab navigation can be added as well, in this case the UL gets the card-header-tabs class (in addition to the other classes for creating a tab navigation.

The ‘pill’ navigation can also be added to the card footer. 

Images can be used as a card background with text and buttons as an overlay. In the example below the image gets the card-image class but the card-image-overlay on the container with the text and button elements does the actual trick. As can be seen from the positioning controls on the Design pane it uses absolute positioning with zero offset values to ’snap’ it on top of the card container with the image.

As can be seen from the positioning controls on the Design pane it uses absolute positioning with zero offset values to ’snap’ it on top of the card container with the image. Since the container shields the image, it will need to be selected from the Elements Tree on the Inspector pane on the right.

Please note that for this example the (align) items value on the flex column has been changed from stretch to flex-start with the flex-cards-col-cstm class. Since the image can’t grow with the card — it is not a real background image — allowing the card to grow would create a questionable effect.

Another popular card is the hover overlay card. It is not an official Bootstrap component but added here for completeness. It is build in a very similar way, a card container holding several elements such as an image, text and link elements. An overlay (link) container is added as well. This container can hold other elements.

The main difference is that the container is not visible, unless being hovered. To achieve this the Opacity is set to 0. This can be done on the Design pane in the Effects section. On hover the opacity is set back to 1. Select hover from the State control before doing this.

To complete the effect a transition can be added. First make sure the State control is set back to regular. Then, on the Transitions section, specify a delay for when the value is going to be set back and how long that will take. This can be done on a per property basis, but is not absolutely necessary.

Background colors can be easily customized or changed to a predefined Bootstrap color. The first (black) card below uses the class color-cstm for setting the background and border colors to black (#333 and #262626 respectively). To change these colors, on the Design pane deselect all other classes, then go to the background and border sections to make the customizations.

The customary predefined Bootstrap colors can be used as well. For that simply add the corresponding class such as card-primary, card-success and so on.

Most of these colors don’t work great with the dark text. To quickly change the text color the card-inverse class can be used. This changes the header text to white and paragraphs to a semi-transparent white.

In a similar way only the border color can be styled with a predefined class. To do this use class card-outline-primary and so on.

Groups are created placing the cards in a wrapper (container) with the class card-group. That’s all there’s to it really...

The cards are stacked below the lowest breakpoint, but placed next to each other with a little border separator everywhere else. This is done by changing the display property from block to flex on the card group container at the lowest breakpoint.

The cards are stacked below the lowest breakpoint, but placed next to eachother with a little border separator everywhere else. This is done by changing the display property from block to flex on the card group container at the lowest breakpoint. The result is similar to the flexbox example we constructed before except that the previous method offers more precise control over the width of the cards.

Card decks are created by using the class card-deck instead of card-group. Visually this looks even closer to the previous flexbox example. However, as mentioned there are a few drawbacks here. One was already mentioned, less control over the card width.

The other drawback is that this approach is less scaleable. Adding cards makes each card smaller. While with the other approach the cards will stacks if they are not able to display at the specified width.

This is simple to check in Bootstrap Builder: select a card below and hit cmd/ctrl-D (or right-click, then duplicate or click the duplicate button on the Design pane). Now scroll back up to Automagical card positioning with Flexbox and see the difference!

Using the card-columns class on the outmost container the cards are ordered from top to bottom and left to right.

The default column-count value set by Bootstrap is 3 as of the lowest breakpoint. Using 2 columns as of that point would be preferable — this would give the cards more width on still relatively small screens and prevent the circle in the first (black) card to briefly break outside of the card container.

A similar situation arise for wider screens, there a column count of 4 or even 5 is preferable. Unfortunately, this control is not included in Bootstrap Builder just yet. However, it’s on its way and should make it in before the public release!