Sử dụng Card tạo box chứa nội dung trong Bootstrap

Cách sử dụng .card tạo ra các box chứa nội dung có tùy biến Footer, Header, cách nhóm các Card lại với card-group, card-deck và card-colunms

Card là phần tử có khả năng tùy biến mềm dẻo, dễ mở rộng để chứa các nội dung khác nhau, nó cung cấp tùy chọn tiêu phần header, footer tiêng, thiết lập màu sắc nền, màu chữ ...

Tạo ra một phần tử Card bằng sử dụng .card, nó cũng là phần tử sử dụng kỹ thuật FlexBox (CSS FlexBox, FlexBox trong Bootstap) với tùy chọn hướng chính mặc định thẳng đứng.

Code cơ bản tạo ra Card như sau, với phần nội dung của Card trong phần tử .card-body:

<div class="card" style="width: 320px;">
     <img class="card-img-top" 
        src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">

    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Nội dung văn bản trong <code>.card-body</code> này sử dụng <code>.card-text</code>.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    
</div>
Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm

Phần tử đầu tiên trong .card là phần hiện thị nội dung chính, tạo ra từ .card-body có thể lưu ý các tùy chọn phần tử trong .card-body:

  • .card-title để tạo tiêu đề chính
  • .card-subtitle để tạo tiêu đề phụ
  • .card-text để chứa nội dung văn bản
  • .card-link dùng cho phần tử liên kết a

Màu chữ - nền trong Card muốn thiết lập nền - màu chữ sử dụng thêm lớp bg-*, text-* vào sau .card, các lớp tiện ích này đã biết phần trước. Ngoài ra là các lớp thiết lập viền .border-* (thiết lập Border)

Hình ảnh Muốn cho hình ảnh vào Card thì dùng

  • .card-img-top nếu ảnh phía trên (ảnh sẽ bo tròn 2 góc phía trên cho vừa với Card)
  • .card-img-bottom nếu ảnh phía dưới
  • .card-img rounded-0 nếu ảnh ở khoảng giữa

Thêm List group có thể thêm vào .card các List Group để có được danh dách liệt kê bên trong

Header/Footer hêm vào .card một Hearder thì dùng .card-header, còn thêm Footer dùng .card-footer. Code Ví dụ

Tạo ra Card Group

Để nhanh chóng nhóm một số Card lại với nhau hãy sử dụng phần tử chứa .card-group, mặc định phần tử chứa này cũng hiện thị flexbox với hướng mặc định ngang. Các Card trong nhóm sẽ có độ rộng bằng nhau và nằm sát nhau

Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm
Footer của Card
Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm
Footer của Card
Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm
Footer của Card 
<div class="card-group">
    <div class="card">
        <img class="card-img-top" src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">Tiêu đề Card</h5>
            <h6 class="card-subtitle mb-1 text-muted">Ví dụ mẫu sử dụng Card</h6>
            <p class="card-text">Nội dung văn bản trong <code>.card-body</code> này sử dụng <code>.card-text</code>.</p>
            <a href="#" class="btn btn-primary">Nút bấm</a>
        </div>
        <div class="card-footer text-muted">
            Footer của Card
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">Tiêu đề Card</h5>
            <h6 class="card-subtitle mb-1 text-muted">Ví dụ mẫu sử dụng Card</h6>
            <p class="card-text">Nội dung văn bản trong <code>.card-body</code> này sử dụng <code>.card-text</code>.</p>
            <a href="#" class="btn btn-primary">Nút bấm</a>
        </div>
        <div class="card-footer text-muted">
            Footer của Card
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">Tiêu đề Card</h5>
            <h6 class="card-subtitle mb-1 text-muted">Ví dụ mẫu sử dụng Card</h6>
            <p class="card-text">Nội dung văn bản trong <code>.card-body</code> này sử dụng <code>.card-text</code>.</p>
            <a href="#" class="btn btn-primary">Nút bấm</a>
        </div>
        <div class="card-footer text-muted">
            Footer của Card
        </div>
    </div>
</div>

Tạo ra Card Deck

Cũng làm nhòm lại với .card-deck ý nghĩa như .card-group nhưng các Card không sát nhau mà cách nhau một khoảng

Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm
Footer của Card
Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm
Footer của Card
Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm
Footer của Card 
<div class="card-group">
    <div class="card">
        <img class="card-img-top" src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">Tiêu đề Card</h5>
            <h6 class="card-subtitle mb-1 text-muted">Ví dụ mẫu sử dụng Card</h6>
            <p class="card-text">Nội dung văn bản trong <code>.card-body</code> này sử dụng <code>.card-text</code>.</p>
            <a href="#" class="btn btn-primary">Nút bấm</a>
        </div>
        <div class="card-footer text-muted">
            Footer của Card
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">Tiêu đề Card</h5>
            <h6 class="card-subtitle mb-1 text-muted">Ví dụ mẫu sử dụng Card</h6>
            <p class="card-text">Nội dung văn bản trong <code>.card-body</code> này sử dụng <code>.card-text</code>.</p>
            <a href="#" class="btn btn-primary">Nút bấm</a>
        </div>
        <div class="card-footer text-muted">
            Footer của Card
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">Tiêu đề Card</h5>
            <h6 class="card-subtitle mb-1 text-muted">Ví dụ mẫu sử dụng Card</h6>
            <p class="card-text">Nội dung văn bản trong <code>.card-body</code> này sử dụng <code>.card-text</code>.</p>
            <a href="#" class="btn btn-primary">Nút bấm</a>
        </div>
        <div class="card-footer text-muted">
            Footer của Card
        </div>
    </div>
</div>

Nhóm Card ở dạng cột

Nếu các Card muốn nhóm lại và hiện thị dạng cột, hết cột này đến cột khác thì dùng đến .card-columns

Card image cap
Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB
Đăng ký nhận bài viết mới