Cards
Bootstrap delivers too many card configurations to display, and these can be swapped and configured with utility classes to make an endless array of options. Listed on this page are some of the preferred card styling and additional classes we've made to specific card types.
Basic Card
card and a child element with the class card-body that provides padding around the card. The card will stretch the width of it's container. This type of card is generally good for very simple content. A paragraph tag is not required inside the card body, and if it is used, you should add the mb-0 class on the last paragraph in the card to avoid extra margin at the bottom of the card.
Heading Styles
If cards are to have a heading, we prefer to apply this heading in one of three ways: at the top, in the middle, or in the body. These three examples are shown below.
Top Heading
h4 class for its size and often use the text-bold class. When using inverse text, the bolded variant is highly encouraged. The heading can be either a div or a h tag, as either will work as long as card-header is added as well.
Middle Heading
Placing the heading in the middle of the card can be used when an image, or possible some other element is used at the top of the card. The exact same code can be used as when applying the heading at the top.
Card Body Heading
Placing the heading outside of the body is not required at all. Placing the headings right in the body is completly accetable and great for cards that don't really need to stand out from other content.Bordered Cards
We've embraced an optional card style that will help cards stand out from other contnet if a top heading style isn't preferred. These bordered cards essentially just use a normal card footer with no content and a p-2 class added to them.
bg-[colorName] classes to the card footer to achieve the color you would like.
Do Not Do This
<!-- -->.
Adding Buttons to Cards
Buttons should typically only be added to the card body areas or the card footer. Button colors should also typically match the card color styling if any is used.
Color Styling
bg-info class is used on the heading, the button should also use the btn-info class so that the colors match. We also added bg-white onto the card footer.
If a button is added into the card body, it should also be the same color as other card styling colors used.
Button ActionCard Alignment Issues
The main issue you will come across is dealing with card alignment. Often times when there are mutliple cards in a row, the desire is for the cards to all be the same height, but if the content isn't just right, by default this doesn't happen. The trick then is to simple make sure the card's display property assigned to flex. The easiest way to do this is with the class d-flex. As a side effect, the card will no longer be forced to be 100% width of its container, so a good idea is to also add w-100 onto the card. Often times this isn't necessary, but if you notice 1 of the cards not as wide as the others this is the case.
w-100 class, and being a flexed item, it is only as wide as it needs to be.
No W-100 Class
With W-100 Class
Stacking
Another alignment issue deals with stacking cards. It's often easy to layout your page for larger screen sizes and forget to check about mobile. Often times cards stack on mobile and they don't have default margins around them, so the cards touch each other. It's almost always a good idea to add a mb-3 class on cards so the don't touch content below them when they stack.
Complex Card Content
It's great when a card contains one bit of information, but sometimes we want to put a bit more complex information into cards, often in the right sidebar. This is where flush list groups come in. Instead of using a single card body, you can use a Bootstrap listgroup with the added class list-group-flush which will bring the borders to the edges of the cards.
Deciding when to use a list group card
A good rule of thumb is if the headings for the content within the card is not related, use a list group. If it is realted, simply use a single card body with multiple headings. Here are a few of examples.
Contact Information
Address
...
Social
...
In this examples, all of the sub-headings are types of contact information, so it makes sense to contain all of the content within a single card body.
Additional Information
Contact
...
Policies
...
Links
...
In this example, while all the content is probably related to the page where it's found, it's really not realted to each other. So using a list-group works well so group them all, but at the same time indicate a separation.
Contact Information
...
Policies
...
This example is not a preferred method, but it still can work under some circumstances. The content can start to look a little too much like a candycane with all the stripes when too many cards are used all stacked on top of each other. Try to build sidebars using one of the first two options, or just put some of the content outside of the cards. Not everything in the sidebar needs to be in a card or equally important.
Contact Information
...
Policies
...
This would be preferred over using multiple cards. Use a card for the more important information, and just drop the less important content outside of the card.
Navigational Cards
Sometimes you have a page that really only serves as wayfinding for the user to get to other pages. There isn't a lot of content and who wants to just have a list of links. Navigational cards to the rescue. Well, really, just adding the nav-card class to the card and using a absolute positioned button will provide some consistency among the cards.
card-body. Sorry listgroup cards. And usin this in conjunction with the alignment suggestions above, you can create a consistant layout on a page. Best practice is to make all cards the same style (border, heading, etc). Then you can change one of them if you really want it to stand out.
Card Button
Event Cards
If you are listing events on a page and have an image and a date, consider using the event-card class on a wrapper over the image to create a unique card that really stands out.
Color rules still apply. So try to make sure the title background, button color and date background all match together.
Link TextEvent Title
Color rules still apply. So try to make sure the title background, button color and date background all match together.
Link TextColor rules still apply. So try to make sure the title background, button color and date background all match together.
Link TextThings Not to Do
There are some things you may be tempted to do that we ask that you do not do. Here are some of those things.
- Adding extra padding around card titles. Please refrain from doing this. The
card-headerclass adds the appropriate amount of space around the text. Leave it be. - Mixing colors on cards. As stated, please keep card borders, buttons and backgrounds within the same color class.
- Modifying card borders. Please just leave them alone. Don't make them thicker or styled. Than can be removed (if you are just going for the spacing of a card) but please don't to more than that.
- Change the thickness of the bordered card style. Please just use the
p-2class for this border. The border, however, can be placed at the top of the card if desired. - Use mutliple card headings with backgrounds on a single card. We would prefer that you do not do this.