Card in Bootstrap, concepts and usage

Card in Bootstrap, concepts and usage


In the previous lesson, Taimienphi.vn introduced you to images in Bootstrap, in the next lesson below, Taimienphi.vn will introduce you about Card in Bootstrap.


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

Table of Contents:
1. Create basic Card in Bootstrap
2. Content types for Cards in Bootstrap
2.1. Header and Footer in Bootstrap
2.2. Card has body only
2.3. Add List Group in Card
2.4. Customize background for card in Bootstrap
2.5. Customize border and card text in Bootstrap
3. Card layout in Bootstrap
3.1. Create Card Group in Bootstrap
3.2. Create Card Deck in Bootstrap
3.3. Create columns for cards in Bootstrap
3.4. Create cards horizontally in Bootstrap
3.5. Use images as background for the card
3.6. Align the text in the card
3.7. Specify a size for the card in Bootstrap
3.8. Create a card that works as a link

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:

card in bootstrap

The output will look like the following:

card in bootstrap 2

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:

card in bootstrap 3

The output will look like the following:

card in bootstrap 4

2.2. Card has body only

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

card in bootstrap 5

The output will look like the following:

card in bootstrap 6

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:

card in bootstrap 7

The output will look like the following:

card in bootstrap 8

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:

card in bootstrap 9

The output will look like the following:

card in bootstrap 10

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:

card in bootstrap 11

The output will look like the following:

card in bootstrap 12

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:

card in bootstrap 13

The output will look like the following:

card in bootstrap 14

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:

card in bootstrap 15

The output will look like the following:

card in bootstrap 16

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:

card in bootstrap 17

The output will look like the following:

card in bootstrap 18

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:

card in bootstrap 19

The output will look like the following:

card in bootstrap 20

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:

card in bootstrap 21

The output will look like the following:

card in bootstrap 22

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:

card in bootstrap 23

The output will look like the following:

card in bootstrap 24

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:

card in bootstrap 25

The output will look like the following:

card in bootstrap 26

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:

card in bootstrap 27

The output will look like the following:

card in bootstrap 28

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.

.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *