The House of Cards

As you may have gathered by now, a lot of the old section, well, and general header and footer components have been removed. It was these sectioning and layout components that attracted many developers, myself included, to adopt Bootstrap in the first place.

Fear not, though—the old way might be gone, but in its place comes an all-powerful, Flexbox-driven replacement with near-infinite ways to use it.

The Twitter card component

A card is a generic block-level component with specific styling geared for very specific use cases, such as a photo thumbnail with a description and a call to action below it, as Code Listing 67 shows.

Code Listing 67: A very basic Twitter card

<br />

<h5 class="card-title">Flying Cats</h5>

<p class="card-text">The newest thing in pet owning circles, ………</p>

<a href="#" class="btn btn-primary">Learn More</a>

</div>

With very little markup, Code Listing 67 produces the card shown in Figure 66. Note that in the listing I've substituted the link to the cat picture I used with a link to the placeholder service mentioned in the chapter on images. Feel free to add in your own 500 × 500 image to replace the gray 500 × 500 filler image that you’ll see.

Figure 66: A basic Twitter card

As you can see from Code Listing 67, the structure is very much like everything else we’ve seen so far. We have an outer parent with a single class, card in this case, followed by a number of inner elements that each have more specific purposes, such as card-img-top, card-text, and card-body.

Because cards are all block-level attributes, the BS4 development team recommends using the BS4 grid layout classes to position and size the cards. This gives you absolute flexibility, and it ensures that your layouts will always allow BS4 to look after all your responsive resizing tasks for you.

We don’t have space here to cover everything the card component can do, but I will show you a few notable examples.

Headers and footers

Headers and footers can be added to your cards by just adding an extra <div> element in the appropriate place.

Code Listing 68: Adding a header to your card

<br />

Information about "Peter Shaw"

</div>

<h5 class="card-title">Hello my name is SHAWTY</h5>

<p class="card-text">This is some text telling you all about me and what I'm doing.</p>

<a href="#" class="btn btn-primary">Click Here to Learn More</a>

</div>

The header is simply added as a nested <div>, immediately after the opening tag for the card itself, and then given a class of card-header. The rest of the markup is the same as the example in Code Listing 67. Note that the screenshot shows the card expanding to the full width of the col holding it. If that <div> was changed to something along the lines of col-md-3, then the card would take up exactly a quarter of the space available (remember, there are 12 cells across by default).

Figure 67: A Twitter card with a header

If you change the class to card-footer and place the <div> just before the closing tag of the card container, you’ll get the same effect, but at the bottom of the container.

Figure 68: A Twitter card with a footer

Card colors

Just as with everything else in BS4, you can use the color classes to add contextual color to your cards. bg-success, bg-light, bg-info, and the rest allow you to set the background color of the card.

Code Listing 69, while a bit on the long side, should give you a good feel for the different color combinations you can use.

Code Listing 69: Some of the different color combinations a card can use

<br />

<div class="card-header">Header</div>

<h5 class="card-title">Primary card title</h5>