Thẻ header

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Bạn đang xem: Thẻ header

About

A card is a flexible và extensible nội dung container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, & thumbnails. Similar functionality to lớn those components is available as modifier classes for cards.

Example

Cards are built with as little markup & styles as possible, but still manage khổng lồ deliver a ton of control & customization. Built with flexbox, they offer easy alignment & mix well with other Bootstrap components. They have sầu no margin by mặc định, so use spacing utilities as needed.

Below is an example of a basic thẻ with mixed content & a fixed width. Cards have no fixed width to lớn start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.


*

Card title

Some quichồng example text khổng lồ build on the card title and 3D the bulk of the card"s nội dung.

Go somewhere
class="card" style="width: 18rem;">
class="card-body"> class="card-title">Card title class="card-text">Some quiông chồng example text khổng lồ build on the card title và biến hóa the bulk of the card"s nội dung.

href="#" class="btn btn-primary">Go somewhere

Content types

Cards tư vấn a wide variety of content, including images, text, danh sách groups, links, and more. Below are examples of what’s supported.

Xem thêm: Cách Chỉnh Sửa Footer Trong Wordpress, Chỉnh Sửa Footer Trong Wordpress

Body

The building bloông xã of a thẻ is the .card-body. Use it whenever you need a padded section within a card.


This is some text within a card body toàn thân.
class="card">
class="card-body"> This is some text within a card body.

Titles, text, & links

Card titles are used by adding .card-title to lớn a tag. In the same way, liên kết are added & placed next lớn each other by adding .card-link khổng lồ an tag.

Subtitles are used by adding a .card-subtitle lớn a tag. If the .card-title & the .card-subtitle items are placed in a .card-body toàn thân thành tựu, the card title & subtitle are aligned nicely.


Card title Card subtitle

Some quiông xã example text khổng lồ build on the card title & Cosplay the bulk of the card"s content.

Card links Another liên kết
class="card-body"> class="card-title">Card title class="card-subtitle mb-2 text-muted">Card subtitle class="card-text">Some quiông xã example text lớn build on the card title và Cosplay the bulk of the card"s nội dung.

href="#" class="card-link">Card link href="#" class="card-link">Another links

Images

.card-img-top places an image khổng lồ the top of the thẻ. With .card-text, text can be added to lớn the card. Text within .card-text can also be styled with the standard HTML tags.

Xem thêm: Sửa Lỗi Your Win 10 Báo Your Windows License Will Expire Soon Trên Windows 10


*

class="card" style="width: 18rem;">
class="card-body"> class="card-text">Some quiông xã example text to lớn build on the card title and ảo diệu the bulk of the card"s content.


class="card" style="width: 18rem;"> class="list-group list-group-flush"> class="list-group-item">Cras juskhổng lồ odio class="list-group-item">Dapibus ac facilisis in class="list-group-item">Vestibulum at eros

Chuyên mục: Theme wordpress