{"id":79793,"date":"2018-07-17T22:59:34","date_gmt":"2018-07-17T22:59:34","guid":{"rendered":"https:\/\/www.red-gate.com\/simple-talk\/?p=79793"},"modified":"2022-04-24T21:09:58","modified_gmt":"2022-04-24T21:09:58","slug":"playing-with-cards-in-bootstrap-4","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/playing-with-cards-in-bootstrap-4\/","title":{"rendered":"Playing with Cards in Bootstrap 4"},"content":{"rendered":"

Earlier versions of Bootstrap had a couple of components doing nearly the same job\u2014flexible containers for markup offering a few predefined elements such as headers and footers. One of those components was implemented through the well<\/strong> class; another was created through the panel<\/strong> class. In Bootstrap 4, both have disappeared and are replaced by a single component that provides the same capabilities and possibly more. This new component is the card<\/strong>. The card component, however, supplies some modifier classes to deliver nearly the same behavior that you could achieve in earlier versions with wells and panels.<\/p>\n

The HelloCard Example<\/h2>\n

The key statement to keep in mind is that a card is a markup container\u2014a sort of static web component that you use to compose the overall view. Here\u2019s the basic markup you need to arrange.<\/p>\n

<div\u00a0class=\"container\">\r\n\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"row\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"card\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"card-body\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3>I\u00a0am\u00a0the\u00a0body\u00a0of\u00a0a\u00a0very\u00a0basic\u00a0card<\/h3>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\r\n\u00a0\u00a0\u00a0\u00a0<\/div>\r\n <\/div><\/pre>\n
And here\u2019s a slightly more sophisticated card in which the top content is an image and the body contains title, subtitle and plain text. The output of both cards is shown in Figure 1.<\/p>\n
<div\u00a0class=\"row\">\r\n\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"card\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img\u00a0class=\"card-img-top\"\u00a0\r\n             src=\"~\/content\/images\/poppies.jpg\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"card-body\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3\u00a0class=\"card-title\">\r\n               I\u00a0am\u00a0the\u00a0body\u00a0of\u00a0a\u00a0not-so-simple\u00a0card\r\n            <\/h3>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h4\u00a0class=\"card-subtitle\">\r\n               I\u00a0am\u00a0the\u00a0subtitle\r\n            <\/h4>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p\u00a0class=\"card-text\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0I\u00a0am\u00a0plain\u00a0text\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\r\n\u00a0\u00a0\u00a0\u00a0<\/div>\r\n<\/div><\/pre>\n
<\/p>\n
FIGURE 1. Two sample Bootstrap 4 cards in action.<\/p>\n
As you can see, the card takes all the horizontal space it needs and automatically expands to cover the entire width of its container element. Any image embedded in a card, if properly styled as a card image, is resized to fit the container and maintains the proper aspect ratio across as the viewport resizes. The critical style assignment associated with the card-img-top<\/strong> class is:<\/p>\n
style=\"width:\u00a0100%;\"<\/pre>\n
This ensures that the image will always fit in the container card with the original aspect ratio. In addition to that, the card-img-top<\/strong> class sets the border radius and line and vertical alignment. The image is not the sole markup element that enjoys a special treatment in Bootstrap 4 when made part of a card. For example, title and subtitle are automatically aligned if both are contained in a card body. In the body, anchor elements (the A element) are automatically aligned horizontally if decorated with the card-link class.<\/p>\n
<div\u00a0class=\"card\">\r\n\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"card-body\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3\u00a0class=\"card-title\">\r\n           I\u00a0am\u00a0the\u00a0body\u00a0of\u00a0a\u00a0not-so-simple\u00a0card\r\n        <\/h3>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h4\u00a0class=\"card-subtitle\">I\u00a0am\u00a0the\u00a0subtitle<\/h4>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p\u00a0class=\"card-text\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0I\u00a0am\u00a0plain\u00a0text\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a\u00a0href=\"#\"\u00a0class=\"card-link\">First\u00a0link<\/a>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a\u00a0href=\"#\"\u00a0class=\"card-link\">Second\u00a0link<\/a>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a\u00a0href=\"#\"\u00a0class=\"card-link\">Third\u00a0link<\/a>\r\n\u00a0\u00a0\u00a0\u00a0<\/div>\r\n\u00a0\u00a0\u00a0\u00a0<img\u00a0class=\"card-img-bottom\"\u00a0\r\n         src=\"~\/content\/images\/eveningsea.jpg\">\r\n<\/div><\/pre>\n
<\/p>\n
FIGURE 2. A richer card with a bottom image.<\/p>\n
As you can see in the figure, the image is now placed at the bottom of the card. However, the true reason why it appears there is the fact that it\u2019s placed after the body, not the class named card-img-bottom<\/strong>. The card style, in fact, doesn\u2019t affect the position in the DOM but only the corners of the image that will be affected by the custom value of the border-radius<\/strong> property.<\/p>\n
Image Overlays on Cards<\/h2>\n
Images in a card appear exactly where they\u2019re placed in the markup and go inline with the text. An exception is when the image is used as an overlay. In this case, the image ends up rendering as the background of the card (or of a section of it) and some text is rendered on top of that. Here\u2019s an example:<\/p>\n
<div\u00a0class=\"card\">\r\n\u00a0\u00a0\u00a0\u00a0<img\u00a0class=\"card-img\" \r\n         src=\"~\/content\/images\/poppies-xs.jpg\">\r\n\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"card-body\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3\u00a0class=\"card-title\">\r\n           I\u00a0am\u00a0the\u00a0body\u00a0of\u00a0a\u00a0not-so-simple\u00a0card\r\n        <\/h3>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"card-img-overlay\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0    <h4\u00a0class=\"card-subtitle\">\r\n               I\u00a0am\u00a0the\u00a0subtitle\r\n            <\/h4>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p\u00a0class=\"card-text\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0I\u00a0am\u00a0plain\u00a0text\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\r\n\u00a0\u00a0\u00a0\u00a0<\/div>\r\n<\/div><\/pre>\n
In the sample markup, the card contains an IMG element styled with the card-img<\/strong> class. Note that the image element is placed outside the body. The rendering of the card follows the order of elements and covers the top half of the card followed by the H3 element in the code above. It\u2019s interesting what is being made of the DIV element style as an overlay with the class card-img-overlay<\/strong>. To be precise, the class has no direct reference to any image file. Here\u2019s the actual styles in the class:<\/p>\n
.card-img-overlay\r\n{\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    padding: 1.25rem; \r\n}<\/pre>\n
As you can see, the card-img-overlay<\/strong> class simply moves the content of the element to the absolute position rooted in the top-left corner of the container. As the image takes up the top half of the container, then the effect is that the content of the element is placed on top of the image, as in the figure.<\/p>\n
<\/p>\n
FIGURE 3. Card text overlaying an image.<\/p>\n
Interestingly, if you move the image reference past the DIV element styled as card-img-overlay<\/strong>, then the image appears in the bottom half of the card just where you expect it to be, but the overlay content is still placed at the 0,0 corner of the container in an absolute position. So, it may happen that the overlay content renders on top of other text.<\/p>\n
Header and Footer<\/h2>\n
Cards are graphical variations of a DIV container and are designed to replace ad hoc components available in earlier versions of Bootstrap such as the panel<\/strong> component. Hence, not just the card has a body, but it can also have header and footer elements.<\/p>\n
<div\u00a0class=\"card\">\r\n\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"card-header\">Header<\/div>\r\n\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"card-body\">\r\n        ...\r\n\u00a0\u00a0\u00a0\u00a0<\/div>\r\n\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"card-footer\">Footer<\/div>\r\n<\/div><\/pre>\n
<\/p>\n
FIGURE 4. A card with header and footer<\/p>\n
Header and footer are styled differently from the rest of the card. Needless to say, headers and footers are optional. Note that card-header<\/strong> and card-footer<\/strong> are simply decorative styles meaning that they just define the appearance of elements styled that way and not the role or the position. In other words, you can have a card with multiple headers and\/or footers and even can have an element placed at the bottom (where a footer would reasonably fit) styled as a header.<\/p>\n
In addition, cards can be given borders, text colors, alignment and backgrounds. You can use any of the predefined utility styles such as border-success<\/strong>, bg-primary<\/strong> and text-white<\/strong>. Note also that a card can be styled in total freedom resorting to any sort of combination of decorative styles. Even the width of a card can be controlled. So far, I assumed the card would take either the full width of the container or just the space it needs. You can control the width of a card in any other allowed way, whether through an explicit measure or via the grid.<\/p>\n
<div class=\"card\" style=\"width: 50rem;\"><\/pre>\n
The content of a card is as rich as HTML can allow. Let\u2019s see how to embed a tabstrip in a card.<\/p>\n
Embedding Tabs in a Card<\/h2>\n
In Bootstrap 4, a tabstrip is the same as it was in earlier versions and can be obtained through exactly the same markup. To have a standard tabstrip in the body of a card all you do is add the regular tabstrip markup in the body section of the card.<\/p>\n
<div\u00a0class=\"card-body\">\r\n\u00a0\u00a0\u00a0\u00a0<ul\u00a0class=\"nav\u00a0nav-tabs\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li\u00a0class=\"nav-item\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a\u00a0class=\"nav-link\u00a0active\"\u00a0id=\"home-tab\"\u00a0\r\n               data-toggle=\"tab\"\u00a0href=\"#home\">First<\/a>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li\u00a0class=\"nav-item\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a\u00a0class=\"nav-link\"\u00a0id=\"profile-tab\"\u00a0\r\n               data-toggle=\"tab\"\u00a0href=\"#profile\">Second<\/a>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/li>\r\n \u00a0\u00a0\u00a0<\/ul>\r\n\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"tab-content\"\u00a0id=\"myTabContent\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"tab-pane\u00a0show\u00a0active\"\u00a0id=\"home\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0One\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"tab-pane\"\u00a0id=\"profile\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Two\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\r\n \u00a0\u00a0\u00a0<\/div>\r\n<\/div><\/pre>\n
<\/p>\n
FIGURE 5. A tabstrip embedded in a card<\/p>\n
Technically, you can have a tabstrip everywhere in a card, even in the header or the footer. If that helps, you can even have a list of hyperlinks in the header and have them rendered as a tabstrip. In this case, though, one tab shows the content and all other tabs are plain links connecting to other views.<\/p>\n
<div\u00a0class=\"card-header\">\r\n\u00a0\u00a0\u00a0\u00a0<ul\u00a0class=\"nav\u00a0nav-tabs\u00a0card-header-tabs\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li\u00a0class=\"nav-item\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a\u00a0class=\"nav-link\u00a0active\"\u00a0href=\"#\">Actual\u00a0content<\/a>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li\u00a0class=\"nav-item\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a\u00a0class=\"nav-link\"\u00a0href=\"#\">Just\u00a0a\u00a0link<\/a>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li\u00a0class=\"nav-item\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a\u00a0class=\"nav-link\u00a0disabled\"\u00a0href=\"#\">Disabled<\/a>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/li>\r\n\u00a0\u00a0\u00a0\u00a0<\/ul>\r\n<\/div>\r\n<div\u00a0class=\"card-body\">\r\n\u00a0\u00a0\u00a0 <h5\u00a0class=\"card-title\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fake\u00a0tabstrip\u00a0in\u00a0the\u00a0header\r\n\u00a0\u00a0\u00a0\u00a0<\/h5>\r\n<\/div><\/pre>\n
<\/p>\n
FIGURE 6. A simulated tabstrip in the header of a card<\/p>\n
The card-header-tabs<\/strong> class turns the children of a UL element into tabs, except that only the active tab shows real content\u2014the card\u2019s content\u2014and all others are plain links to some external content.<\/p>\n
Layouts of a Card<\/h2>\n
Cards are ultimately panels and panels sometimes look nice if laid out horizontally. To achieve that you can use the classic Bootstrap grid or you can use a few native options of cards. Note, though, that layout options in Bootstrap 4.1 are not fully responsive.<\/p>\n
The simplest way to group together cards is using the card-group<\/strong> class. Quite simply, a DIV styled with the class acts as the container of one or more cards.<\/p>\n
<div\u00a0class=\"card-group\">\r\n    <div\u00a0class=\"card\">\r\n       ...\r\n    <\/div>\r\n    <div\u00a0class=\"card\">\r\n       ...\r\n    <\/div>\r\n    <div\u00a0class=\"card\">\r\n       ...\r\n    <\/div>\r\n<\/div><\/pre>\n
As mentioned, all cards are laid out horizontally, one next to the other, equally sharing the available space. No additional row is created when the number of cards (and their size) is too large or the viewport too narrow.<\/p>\n
<\/p>\n
FIGURE 7. A sample card group.<\/p>\n
There are a few things to say about card groups. First, headers and footers are automatically aligned, when defined. As in the figure, headers are aligned to the top across the list of cards and footers are aligned to the bottom. Different heights of headers and footers are managed accordingly. Bootstrap 4 achieves the effect through a CSS flexbox container. There are two more effects achievable with card layouts and both are technically implemented using CSS flexbox containers. They are card decks and card columns.<\/p>\n
A card deck is similar to a card group except that cards are equally spaced. The final effect is nearly the same as in Figure 7 except that cards are divided by some empty space. Headers and footers are aligned to the top and the bottom respectively in the same way. Card columns are more interesting instead.<\/p>\n
<\/p>\n
FIGURE 8. Card columns.<\/p>\n
As in the figure, once organized in columns cards are rendered on a new row every time that horizontal space is not enough. Vertical alignment, however, is based on the available space in the column where the card dynamically happens to belong. In other words, when colum cards are used horizontal rows may not have the same height.<\/p>\n
The number of columns tends to be three, but on XS screens it\u2019s just one. There\u2019s no way to change the number of columns in pure native CSS. As documented, though, you can use SASS mixins to alter the behavior and then recompile the Bootstrap 4.x source code to CSS. In particular, the number of columns displayed can be set via the media-breakpoint-only<\/strong> mixin.<\/p>\n
@include media-breakpoint-only(lg) {\r\n    column-count: ...;\r\n}<\/pre>\n
Summary<\/h2>\n
Cards are a new graphical element in Bootstrap 4 designed to unify in a single component a few similar components available in earlier versions. There are no more panels, thumbnails, or wells in Bootstrap, but the same features can be easily obtained through cards. Hence, a card is a highly customizable and rich box that supports all sort of graphical enhancement including borders, padding, background and foreground colors and specific areas such as header, footer, and general content.<\/p>\n
<\/a> Card are an excellent shortcut when all you need is wrapping up together heterogeneous information such as a few distinct pieces of text and images. The term \u2018card\u2019 ultimately explains it all. You can pretty much shape a card the way you want, adding styles and colors and laying them out vertically (on small XS screens) and in horizontal sequence with various options (continuous, spaced, a l\u00e0 Pinterest) on larger screens. This particular aspect, though, affects the overall responsiveness of cards and might be improved in future versions of Bootstrap 4.<\/p>\n","protected":false},"excerpt":{"rendered":"
Once again, Dino Esposito explains a Bootstrap 4 enhancement. This time, he explains how the card component replaces the well and panel classes. …<\/p>\n","protected":false},"author":221911,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[143538],"tags":[],"coauthors":[6780],"class_list":["post-79793","post","type-post","status-publish","format-standard","hentry","category-dotnet-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/79793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/221911"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=79793"}],"version-history":[{"count":2,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/79793\/revisions"}],"predecessor-version":[{"id":79888,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/79793\/revisions\/79888"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=79793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=79793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=79793"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=79793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}