Card in Bootstrap, concepts and usage

In Bootstrap 4 introduces a new container element called Card, replacing the old Panel, Well and Thumbnail components. The card includes options for header and footer, content expansion, contextual background color, and powerful display options. Refer to the Bootstrap lesson below of Taimienphi.vn to learn about Card in Bootstrap.

Learn how to use the Card in Bootstrap

1. Create basic Card in Bootstrap

To create the basic card in Bootstrap, we use the class .card, and the content of the card is placed in the class .card-body.

For example: In the following example we will create a basic card in Bootstrap:

The output will look like the following:

2. Content types for Cards in Bootstrap

The card in Bootstrap supports many different types of content including images, text, list groups, links, etc.

2.1 Header and Footer in Bootstrap

Use class .card-header to add title and class .card-footer to add a footer to the card in Bootstrap.

For example: The following example illustrates how to create a Header and a Footer for a card in Bootstrap:

The output will look like the following:

2.2. Card has body only

We can use class .card contains class .card-body to create a card with only the body part.

The output will look like the following:

2.3. Add List Group in Card

If desired we can also add the list group in the card along with other content types as in the example below:

The output will look like the following:

Also you can mix and match different types of content to create cards. In the example below we create a fixed width card with images, text, list groups and links:

The output will look like the following:

2.4. Customize background for card in Bootstrap

Bootstrap includes several options for customizing the background, borders and colors. We can use text utility classes and background to change the interface of the card.

For example: The following example illustrates how to customize the background of the card in Bootstrap:

The output will look like the following:

2.5. Customize border and card text in Bootstrap

To customize the text and border colors for any card, we use the text utility and border layers. Just apply these layers on .card run or child elements of as shown in the example below:

The output will look like the following:

3. Card layout in Bootstrap

In addition to the card format options, Bootstrap also includes several options for creating card layouts.

3.1. Create Card Group in Bootstrap

We can use the card group to display the card as an attached element, with columns of equal width and height. Card Group used display: flex; to set a constant size.

For example: In the following example we will create a card group:

The output will look like the following:

3.2. Create Card Deck in Bootstrap

Card Deck is similar to Card Group, ie the width and height of the columns are equal, only the cards are not attached.

For example: The following example illustrates how to create a card deck in Bootstrap:

The output will look like the following:

3.3. Create columns for cards in Bootstrap

In Bootstrap 4, we can create grid tags like Pinterest by wrapping these tags in .card-columns. Cards are created with attributes column in CSS instead of flexbox easier to align.

Also cards are arranged in order from top to bottom and from left to right.

3.4. Create cards horizontally in Bootstrap

If desired, we can also create the card horizontally, where the image and text content are placed side by side using a combination of mesh layers and utilities.

For example: For the example below illustrates how to create a card horizontally in Bootstrap:

The output will look like the following:

3.5. Use images as background for the card

To turn the image into a background for the card and add the card’s text on it, we use layers .card-img-overlay replacement for class .card-body. Depending on the image, we may add formats to adjust the interface.

For example: The following example illustrates how to use images as a background for the card in Bootstrap:

The output will look like the following:

Note: The content of the card must not exceed the height of the image. If exceeded, the contents will overflow and display outside the image.

3.6. Align the text in the card

By using the text alignment utility classes, we can easily align the text position for any card.

For example: In the following example we will align the text in the card:

The output will look like the following:

3.7. Specify a size for the card in Bootstrap

The Card width in Bootstrap is set to 100% by default, not the specific size. However, we can resize this by using custom CSS classes, grid layers, or custom size utility classes.

For example: The following example illustrates how to specify the size for the card in Bootstrap:

The output will look like the following:

3.8. Create a card that works as a link

By adding layers .stretched-link For the link inside the card to create the card works similar to a link, ie we can click.

For example: Refer to the example below:

The output will look like the following:

The above lesson Taimienphi.vn has just introduced you to Card in Bootstrap. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article.

https://thuthuat.taimienphi.vn/card-trong-bootstrap-51120n.aspx
In the next lesson, Taimienphi.vn will introduce you further Media Object in Bootstrap.