Bootstrap Card

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Card trong Bootstrap.

Sử dụng Bootstrap Card

Bootstrap Card là một nơi chứa nội dung linh hoạt và có thể mở rộng. Nó bao gồm các tùy chọn header và footer, nhiều loại nội dung, màu nền theo ngữ cảnh và các tùy chọn hiển thị mạnh mẽ. Card thay thế các thành phần panel, well và thumbnail trong phiên bản Bootstrap 3 cũ.

Trong các phần sau, bạn sẽ thấy những gì bạn có thể làm với thành phần thẻ.

Tạo Bootstrap Card cơ bản

Bootstrap Card có code khá là đơn giản. Trình bao bọc bên ngoài yêu cầu lớp cơ sở .card, trong khi nội dung có thể được đặt bên trong phần tử .card-body. Ví dụ sau đây sẽ chỉ cho bạn cách tạo một thẻ có hình ảnh, kết hợp với một số nội dung văn bản và một button.

<div class="card" style="width: 300px;">
    <img src="images/sample.svg" class="card-img-top" alt="...">
    <div class="card-body text-center">
        <h5 class="card-title">Alice Liddel</h5>
        <p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
        <a href="#" class="btn btn-primary">View Profile</a>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo Bootstrap Card cơ bản
Lưu ý: Bootstrap Card không có chiều rộng cố định, chúng sẽ chiếm toàn bộ chiều rộng của phần tử cha của nó. Vì vậy, nếu bạn cần card có chiều rộng cố định, bạn cần tự áp dụng thuộc tính chiều rộng trên card. Ngoài ra, card không có margin theo mặc định, hãy sử dụng các lớp tiện ích giãn cách nếu cần.

Các loại nội dung cho Bootstrap Card

Card hỗ trợ nhiều loại nội dung, bao gồm hình ảnh, văn bản, list group, liên kết, navigation và nhiều hơn thế nữa. Dưới đây là các ví dụ về những gì được hỗ trợ bởi card.

Bootstrap Card chỉ có nội dung

Bạn có thể đơn giản sử dụng lớp .card với .card-body bên trong, bất cứ khi nào bạn cần tạo hộp đệm.

<div class="card">
    <div class="card-body">This is some text within a padded box.</div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Bootstrap Card chỉ có nội dung

Bootstrap Card có tiêu đề, văn bản và liên kết

Hơn nữa, bạn cũng có thể đặt tiêu đề và liên kết bên trong card cùng với văn bản, như sau:

<div class="card" style="width: 300px;">
    <div class="card-body">
        <h5 class="card-title">Eiffel Tower</h5>
        <h6 class="card-subtitle mb-3 text-muted">Champ de Mars, Paris, France</h6>
        <p class="card-text">Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.</p>
        <a href="#" class="card-link">View pictures</a>
        <a href="#" class="card-link">Discover history</a>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Bootstrap Card có tiêu đề, văn bản và liên kết

Bootstrap Card có đầu trang và chân trang

Bạn cũng có thể thêm đầu trang và chân trang trong card của mình bằng cách sử dụng lớp .card-header.card-footer tương ứng. Hãy xem ví dụ sau:

<div class="card text-center">
    <div class="card-header">Featured</div>
    <div class="card-body">
        <h5 class="card-title">NASA Launched Solar Probe</h5>
        <p class="card-text">NASA launched Parker space probe in 2018 with the mission of making observations of the outer corona of the Sun. It is the first-ever mission to "touch" the Sun.</p>
        <a href="#" class="btn btn-primary">Know more</a>
    </div>
    <div class="card-footer text-muted">3 years ago</div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Bootstrap Card có đầu trang và chân trang
Mẹo: Bạn có thể sử dụng các lớp tiện ích căn chỉnh văn bản chẳng hạn như .text-center.text-end để căn chỉnh nội dung của card tương ứng ở giữa và cuối bên phải. Theo mặc định, chúng được căn trái.

Đặt nhóm danh sách trong Bootstrap Card

Bạn cũng có thể đặt nhóm danh sách (list group) bên trong card cùng với các loại nội dung khác, như được hiển thị ở đây.

<div class="card" style="width: 300px;">
    <div class="card-header">Featured</div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>
    <div class="card-body">
        <a href="#" class="card-link">Add More</a>
        <a href="#" class="card-link">Share</a>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Đặt nhóm danh sách trong Bootstrap Card

Kết hợp nhiều loại nội dung trong Bootstrap Card

Hãy thoải mái kết hợp nhiều loại nội dung để tạo card bạn cần. Ví dụ sau sẽ tạo một card có chiều rộng cố định với hình ảnh, văn bản, nhóm danh sách và siêu liên kết.

<div class="card" style="width: 300px;">
    <img src="images/thumbnail.svg" class="w-100 border-bottom" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Here is some example text to make up the card's content. Replace it with your own text anytime.</p>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>
    <div class="card-body">
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Kết hợp nhiều loại nội dung trong Bootstrap Card

Thêm điều hướng vào Bootstrap Card

Bạn cũng có thể thêm thành phần điều hướng của Bootstrap như tab và pill vào tiêu đề card.

Để thêm điều hướng tab vào card, chỉ cần đặt đánh dấu tab bên trong tiêu đề card và nội dung tab bên trong thân card. Bạn cũng được yêu cầu sử dụng một lớp bổ sung lớp .card-header-tabs trên phần tử .nav cùng với lớp .nav-tabs để căn chỉnh phù hợp.

Hãy thử ví dụ sau đây tạo ra một tab theo card đẹp mắt.

<div class="card text-center">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a href="#home" class="nav-link active" data-bs-toggle="tab">Home</a>
            </li>
            <li class="nav-item">
                <a href="#profile" class="nav-link" data-bs-toggle="tab">Profile</a>
            </li>
            <li class="nav-item">
                <a href="#messages" class="nav-link" data-bs-toggle="tab">Messages</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="home">
                <h5 class="card-title">Home tab content</h5>
                <p class="card-text">Here is some example text to make up the tab's content. Replace it with your own text anytime.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            <div class="tab-pane fade" id="profile">
                <h5 class="card-title">Profile tab content</h5>
                <p class="card-text">Here is some example text to make up the tab's content. Replace it with your own text anytime.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            <div class="tab-pane fade" id="messages">
                <h5 class="card-title">Messages tab content</h5>
                <p class="card-text">Here is some example text to make up the tab's content. Replace it with your own text anytime.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Thêm tab vào Bootstrap Card

Tương tự, bạn có thể thêm thanh điều hướng vào card bằng cách sử dụng một lớp bổ sung .card-header-pills cùng với lớp .nav-pills trên phần tử .nav, như được hiển thị bên dưới:

<div class="card text-center">
    <div class="card-header">
        <ul class="nav nav-pills card-header-pills">
            <li class="nav-item">
                <a href="#home" class="nav-link active" data-bs-toggle="tab">Home</a>
            </li>
            <li class="nav-item">
                <a href="#profile" class="nav-link" data-bs-toggle="tab">Profile</a>
            </li>
            <li class="nav-item">
                <a href="#messages" class="nav-link" data-bs-toggle="tab">Messages</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="home">
                <h5 class="card-title">Home tab content</h5>
                <p class="card-text">Here is some example text to make up the tab's content. Replace it with your own text anytime.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            <div class="tab-pane fade" id="profile">
                <h5 class="card-title">Profile tab content</h5>
                <p class="card-text">Here is some example text to make up the tab's content. Replace it with your own text anytime.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            <div class="tab-pane fade" id="messages">
                <h5 class="card-title">Messages tab content</h5>
                <p class="card-text">Here is some example text to make up the tab's content. Replace it with your own text anytime.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Thêm thanh điều hướng vào Bootstrap Card

Tùy chỉnh kiểu cho Bootstrap Card

Có một số tùy chọn có sẵn để tùy chỉnh hình nền, đường viền và màu sắc của card.

Tùy chỉnh màu nền và màu chữ cho Bootstrap Card

Bạn có thể chỉ cần sử dụng các lớp tiện ích màu nền và màu chữ để thay đổi diện mạo của card. Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<div class="row">
    <div class="col-6">
        <div class="card text-white bg-primary mb-4">
            <div class="card-body">
                <h5 class="card-title">Primary card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card text-white bg-secondary mb-4">
            <div class="card-body">
                <h5 class="card-title">Secondary card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card text-white bg-success mb-4">
            <div class="card-body">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card text-white bg-danger mb-4">
            <div class="card-body">
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card text-white bg-warning mb-4">
            <div class="card-body">
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card text-white bg-info mb-4">
            <div class="card-body">
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card text-white bg-dark">
            <div class="card-body">
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card bg-light">
            <div class="card-body">
                <h5 class="card-title">Light card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tùy chỉnh màu nền và màu chữ cho Bootstrap Card

Tùy chỉnh đường viền và màu chữ cho Bootstrap Card

Tương tự, bạn có thể tùy chỉnh đường viền và màu văn bản của bất kỳ card nào bằng cách sử dụng các lớp tiện ích văn bản và đường viền. Chỉ cần áp dụng các lớp này trên .card hoặc các phần tử con của nó, như được hiển thị bên dưới:

<div class="row">
    <div class="col-6">
        <div class="card border-primary mb-4">
            <div class="card-body text-primary">
                <h5 class="card-title">Primary card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card border-secondary mb-4">
            <div class="card-body text-secondary">
                <h5 class="card-title">Secondary card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card border-success mb-4">
            <div class="card-body text-success">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card border-danger mb-4">
            <div class="card-body text-danger">
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card border-warning mb-4">
            <div class="card-body text-warning">
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card border-info mb-4">
            <div class="card-body text-info">
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card border-dark mb-4">
            <div class="card-body text-dark">
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card border-light mb-4">
            <div class="card-body text-muted">
                <h5 class="card-title">Light card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tùy chỉnh đường viền và màu chữ cho Bootstrap Card

Tùy chọn bố cục cho Bootstrap Card

Ngoài kiểu dáng của card, Bootstrap cũng bao gồm một số tùy chọn để sắp xếp danh sách card. Tuy nhiên, các bố cục này vẫn chưa responsive được.

Tạo nhóm Bootstrap Card

Bạn có thể sử dụng nhóm card để hiển thị card dưới dạng một phần tử đính kèm duy nhất với các cột chiều rộng và chiều cao bằng nhau. Tuy nhiên, các card bên trong một nhóm card sẽ được xếp chồng lên nhau theo chiều ngang trên các thiết bị cực nhỏ (tức là chiều rộng khung nhìn < 576px). Hãy thử một ví dụ và xem nó thực sự hoạt động như thế nào:

<div class="card-group">
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 5 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 5 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 5 mins ago</small>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo nhóm Bootstrap Card

Tạo lưới Bootstrap Card

Bạn có thể sử dụng hệ thống lưới Bootstrap và các lớp .row-cols-* của nó để kiểm soát số lượng cột lưới (bao quanh thẻ của bạn) sẽ hiển thị trên mỗi hàng. Ví dụ: bạn có thể sử dụng lớp .row-cols-1 để hiển thị một card trên mỗi hàng, tương tự, bạn có thể sử dụng lớp .row-cols-md-2 để hiển thị hai card trên mỗi hàng, từ điểm ngắt trung bình trở lên (tức là chiều rộng khung nhìn ≥768px).

<div class="row row-cols-1 row-cols-md-2 g-4">
    <div class="col">
        <div class="card">
            <img src="images/thumbnail.svg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Last updated 5 mins ago</small>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="images/thumbnail.svg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Last updated 5 mins ago</small>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="images/thumbnail.svg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Last updated 5 mins ago</small>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="images/thumbnail.svg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Last updated 5 mins ago</small>
            </div>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo lưới Bootstrap Card

Tạo Bootstrap Card nằm ngang

Bạn cũng có thể tạo card nằm ngang trong đó nội dung hình ảnh và văn bản được đặt cạnh nhau bằng cách sử dụng kết hợp các lớp tiện ích và lưới, như được minh họa trong ví dụ sau:

<div class="card" style="max-width: 500px;">
    <div class="row g-0">
        <div class="col-sm-5">
            <img src="images/sample.svg" class="card-img-top h-100" alt="...">
        </div>
        <div class="col-sm-7">
            <div class="card-body">
                <h5 class="card-title">Alice Liddel</h5>
                <p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
                <a href="#" class="btn btn-primary stretched-link">View Profile</a>
            </div>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo Bootstrap Card nằm ngang

Tạo hình nền cho Bootstrap Card

Bạn thậm chí có thể biến hình ảnh thành nền thẻ và đặt văn bản của thẻ lên trên cùng bằng cách sử dụng lớp .card-img-overlay thay thế cho lớp .card-body. Tùy thuộc vào hình ảnh, bạn có thể cần các kiểu bổ sung để điều chỉnh tốt hơn. Hãy xem một ví dụ:

<div class="card text-white" style="width: 350px;">
    <img src="images/sample.svg" class="card-img-top" alt="...">
    <div class="card-img-overlay">
        <h5 class="card-title">Alice Liddel</h5>
        <p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
        <a href="#" class="btn btn-primary stretched-link">View Profile</a>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo hình nền cho Bootstrap Card
Lưu ý: Nội dung card không được lớn hơn chiều cao của ảnh. Nếu nội dung lớn hơn hình ảnh, nội dung sẽ được hiển thị bên ngoài hình ảnh.

Căn chỉnh văn bản bên trong Bootstrap Card

Bạn có thể dễ dàng thay đổi căn chỉnh văn bản của bất kỳ card nào — toàn bộ hoặc từng phần cụ thể — với các lớp tiện ích căn chỉnh văn bản. Ví dụ: bạn có thể sử dụng lớp .text-center.text-end để căn chỉnh nội dung văn bản của card tương ứng ở giữa và ở cuối bên phải.

<div class="row row-cols-1 row-cols-md-3 g-3">
    <div class="col">
        <!-- Card with default left text alignment -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
                <a href="#" class="btn btn-primary">Know more</a>
            </div>
        </div>
    </div>
    <div class="col">
        <!-- Card with center text alignment -->
        <div class="card text-center">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
                <a href="#" class="btn btn-primary">Know more</a>
            </div>
        </div>
    </div>
    <div class="col">
    <!-- Card with right text alignment -->
        <div class="card text-end">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
                <a href="#" class="btn btn-primary">Know more</a>
            </div>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Căn chỉnh văn bản bên trong Bootstrap Card

Chỉ định kích thước Bootstrap Card

Card không có chiều rộng cụ thể, chúng có chiều rộng 100% theo mặc định. Tuy nhiên, bạn có thể thay đổi điều này nếu cần với CSS tùy chỉnh, các lớp lưới hoặc các lớp tiện ích định cỡ.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<!-- Card sizing using grid markup -->
<div class="row">
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
                <a href="#" class="btn btn-primary">Know more</a>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
                <a href="#" class="btn btn-primary">Know more</a>
            </div>
        </div>
    </div>
</div>

<!-- Card sizing using sizing utility classes -->
<div class="card w-75">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
        <a href="#" class="btn btn-primary">Know more</a>
    </div>
</div>

<!-- Card sizing using sizing utility classes -->
<div class="card" style="width: 15rem;">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
        <a href="#" class="btn btn-primary">Know more</a>
    </div>
</div>

Tạo liên kết cho toàn bộ Bootstrap Card

Bạn có thể thêm lớp .stretched-link vào một liên kết bên trong thẻ để làm cho toàn bộ card có thể nhấp được (tức là toàn bộ card hoạt động giống như một liên kết).

Hãy thử ví dụ sau để xem điều này thực sự hoạt động như thế nào:

<div class="card" style="width: 300px;">
    <img src="images/sample.svg" class="card-img-top" alt="...">
    <div class="card-body text-center">
        <h5 class="card-title">Alice Liddel</h5>
        <p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
        <a href="#" class="btn btn-primary stretched-link">View Profile</a>
    </div>
</div>
Lưu ý:  Nhiều liên kết cho toàn bộ card không được khuyến khích.
BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.