Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
in English

thẻ

Các thẻ của Bootstrap cung cấp một vùng chứa nội dung linh hoạt và có thể mở rộng với nhiều biến thể và tùy chọn.

Trên trang này

Về

Thẻ 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 cho đầu trang và chân trang, 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ẽ. Nếu bạn đã quen thuộc với Bootstrap 3, thẻ sẽ thay thế các bảng điều khiển, giếng và hình thu nhỏ cũ của chúng tôi. Chức năng tương tự với các thành phần đó có sẵn dưới dạng các lớp bổ trợ cho thẻ.

Thí dụ

Các thẻ được tạo với ít đánh dấu và kiểu dáng nhất có thể, nhưng vẫn quản lý để cung cấp rất nhiều quyền kiểm soát và tùy chỉnh. Được xây dựng với flexbox, chúng cung cấp khả năng căn chỉnh dễ dàng và kết hợp tốt với các thành phần Bootstrap khác. Chúng không có margintheo mặc định, vì vậy hãy sử dụng các tiện ích giãn cách nếu cần.

Dưới đây là ví dụ về thẻ cơ bản có nội dung hỗn hợp và chiều rộng cố định. Các thẻ không có chiều rộng cố định để bắt đầu, vì vậy chúng sẽ tự nhiên lấp đầy toàn bộ chiều rộng của phần tử mẹ của nó. Điều này có thể dễ dàng tùy chỉnh với các tùy chọn kích thước khác nhau của chúng tôi .

Placeholder Image cap
Tiêu đề thẻ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Đi đâu đó 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Loại nội dung

Thẻ hỗ trợ nhiều loại nội dung, bao gồm hình ảnh, văn bản, nhóm danh sách, liên kết, v.v. Dưới đây là ví dụ về những gì được hỗ trợ.

Thân hình

Khối xây dựng của một thẻ là .card-body. Sử dụng nó bất cứ khi nào bạn cần một phần đệm trong thẻ.

Đây là một số văn bản trong nội dung thẻ. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Tiêu đề, văn bản và liên kết

Tiêu đề thẻ được sử dụng bằng cách thêm .card-titlevào <h*>thẻ. Theo cách tương tự, các liên kết được thêm vào và đặt cạnh nhau bằng cách thêm .card-linkvào <a>thẻ.

Phụ đề được sử dụng bằng cách thêm .card-subtitlevào <h*>thẻ. Nếu .card-titlevà các .card-subtitlemục được đặt trong một .card-bodymục, tiêu đề thẻ và tiêu đề phụ sẽ được căn chỉnh một cách đẹp mắt.

Tiêu đề thẻ
Phụ đề thẻ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Liên kết thẻ Một liên kết khác 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Hình ảnh

.card-img-topđặt một hình ảnh lên đầu thẻ. Với .card-text, văn bản có thể được thêm vào thẻ. Văn bản bên trong .card-textcũng có thể được tạo kiểu bằng các thẻ HTML tiêu chuẩn.

Placeholder Image cap

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Liệt kê các nhóm

Tạo danh sách nội dung trong thẻ với nhóm danh sách phẳng.

  • Một món đồ
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
<div class="card" style="width: 18rem;">
  <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>
Đặc sắc
  • Một món đồ
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
<div class="card" style="width: 18rem;">
  <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>
  • Một món đồ
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
Chân thẻ 
<div class="card" style="width: 18rem;">
  <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-footer">
    Card footer
  </div>
</div>

Bồn rửa chén

Trộn và kết hợp nhiều loại nội dung để tạo thẻ bạn cần hoặc ném mọi thứ vào đó. Dưới đây là các kiểu hình ảnh, khối, kiểu văn bản và một nhóm danh sách — tất cả được bao bọc trong một thẻ có chiều rộng cố định.

Placeholder Image cap
Tiêu đề thẻ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

  • Một món đồ
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
Liên kết thẻ Một liên kết khác 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</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>

Thêm đầu trang và / hoặc chân trang tùy chọn trong thẻ.

Đặc sắc
Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tiêu đề thẻ có thể được tạo kiểu bằng cách thêm .card-headervào <h*>các phần tử.

Đặc sắc
Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Trích dẫn

Một câu trích dẫn nổi tiếng, được chứa trong một phần tử blockquote.

Ai đó nổi tiếng trong Tiêu đề nguồn 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Đặc sắc
Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó
2 ngày trước 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Định cỡ

Các thẻ giả định không widthbắt đầu cụ thể, vì vậy chúng sẽ rộng 100% trừ khi có quy định khác. 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, kết hợp Sass lưới hoặc các tiện ích.

Sử dụng đánh dấu lưới

Sử dụng lưới, bọc các thẻ thành các cột và hàng nếu cần.

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó
Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Sử dụng các tiện ích

Sử dụng một số tiện ích định cỡ sẵn có của chúng tôi để nhanh chóng thiết lập chiều rộng của thẻ.

Tiêu đề thẻ

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Cái nút
Tiêu đề thẻ

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Cái nút 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Sử dụng CSS tùy chỉnh

Sử dụng CSS tùy chỉnh trong các bảng định kiểu của bạn hoặc dưới dạng các kiểu nội tuyến để đặt chiều rộng.

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Căn chỉnh văn bản

Bạn có thể nhanh chóng thay đổi căn chỉnh văn bản của bất kỳ thẻ nào — toàn bộ hoặc từng phần cụ thể — với các lớp căn chỉnh văn bản của chúng tôi .

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó
Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó
Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Thêm một số điều hướng vào tiêu đề (hoặc khối) của thẻ với các thành phần điều hướng của Bootstrap .

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Hình ảnh

Thẻ bao gồm một số tùy chọn để làm việc với hình ảnh. Chọn từ việc thêm "mũ hình ảnh" vào một trong hai đầu của thẻ, chồng hình ảnh với nội dung thẻ hoặc chỉ cần nhúng hình ảnh vào thẻ.

Mũ hình ảnh

Tương tự như đầu trang và chân trang, thẻ có thể bao gồm "chữ viết hoa hình ảnh" trên cùng và dưới cùng — hình ảnh ở đầu hoặc cuối thẻ.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút

Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút

Placeholder Image cap 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Lớp phủ hình ảnh

Biến hình ảnh thành nền thẻ và phủ văn bản trên thẻ của bạn. Tùy thuộc vào hình ảnh, bạn có thể cần hoặc không cần thêm kiểu dáng hoặc tiện ích.

Placeholder Card image
Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
Lưu ý rằng nội dung không được lớn hơn chiều cao của hình ả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.

Nằm ngang

Sử dụng kết hợp lưới và các lớp tiện ích, thẻ có thể được tạo theo chiều ngang theo cách thân thiện với thiết bị di động và đáp ứng. Trong ví dụ dưới đây, chúng tôi loại bỏ các rãnh lưới .g-0và sử dụng .col-md-*các lớp để làm cho thẻ nằm ngang tại mdđiểm ngắt. Có thể cần điều chỉnh thêm tùy thuộc vào nội dung thẻ của bạn.

Placeholder Image
Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Kiểu thẻ

Thẻ bao gồm các tùy chọn khác nhau để tùy chỉnh hình nền, đường viền và màu sắc của chúng.

Nền và màu sắc

Sử dụng màu văn bản và tiện ích nền để thay đổi hình thức của thẻ.

Tiêu đề
Tiêu đề thẻ chính

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ phụ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ thành công

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ nguy hiểm

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ cảnh báo

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ thông tin

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ nhẹ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ tối

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc hiển thị rõ ràng từ chính nội dung (ví dụ: văn bản hiển thị) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .visually-hiddenlớp.

Biên giới

Sử dụng các tiện ích biên giới để chỉ thay đổi border-colorthẻ. Lưu ý rằng bạn có thể đặt .text-{color}các lớp trên trang gốc .cardhoặc một tập hợp con của nội dung thẻ như hình dưới đây.

Tiêu đề
Tiêu đề thẻ chính

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ phụ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ thành công

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ nguy hiểm

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ cảnh báo

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ thông tin

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ nhẹ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề
Tiêu đề thẻ tối

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Tiện ích Mixins

Bạn cũng có thể thay đổi các đường viền trên đầu trang và chân trang của thẻ nếu cần, và thậm chí xóa chúng background-colorbằng .bg-transparent.

Tiêu đề
Tiêu đề thẻ thành công

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Chân trang 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Bố cục thẻ

Ngoài việc tạo kiểu dáng cho nội dung bên trong thẻ, Bootstrap còn bao gồm một số tùy chọn để đặt hàng loạt thẻ. Hiện tại, các tùy chọn bố cục này vẫn chưa được đáp ứng .

Nhóm thẻ

Sử dụng nhóm thẻ để hiển thị thẻ 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. Các nhóm thẻ bắt đầu được xếp chồng lên nhau và sử dụng display: flex;để gắn với các kích thước đồng nhất bắt đầu từ smđiểm ngắt.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút

Placeholder Image cap
Tiêu đề thẻ

Thẻ này có văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Cập nhật lần cuối cách đây 3 phút

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Thẻ này thậm chí còn có nội dung dài hơn thẻ đầu tiên để hiển thị hành động có chiều cao bằng nhau.

Cập nhật lần cuối cách đây 3 phút

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">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.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Khi sử dụng nhóm thẻ có chân trang, nội dung của chúng sẽ tự động xếp hàng.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút
Placeholder Image cap
Tiêu đề thẻ

Thẻ này có văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Cập nhật lần cuối cách đây 3 phút
Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Thẻ này thậm chí còn có nội dung dài hơn thẻ đầu tiên để hiển thị hành động có chiều cao bằng nhau.

Cập nhật lần cuối cách đây 3 phút 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">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.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Thẻ lưới

Sử dụng hệ thống lưới Bootstrap và các .row-colslớp của nó để kiểm soát số lượng cột lưới (bao quanh thẻ của bạn) mà bạn hiển thị trên mỗi hàng. Ví dụ: đây là .row-cols-1bố trí các thẻ trên một cột và .row-cols-md-2chia bốn thẻ thành chiều rộng bằng nhau trên nhiều hàng, từ điểm ngắt trung bình trở lên.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Thay đổi nó thành .row-cols-3và bạn sẽ thấy bọc thẻ thứ tư.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Khi bạn cần chiều cao bằng nhau, hãy thêm .h-100vào các thẻ. Nếu bạn muốn chiều cao bằng nhau theo mặc định, bạn có thể đặt $card-height: 100%trong Sass.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ ngắn.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Cũng giống như với nhóm thẻ, chân thẻ sẽ tự động xếp hàng.

Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút
Placeholder Image cap
Tiêu đề thẻ

Thẻ này có văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Cập nhật lần cuối cách đây 3 phút
Placeholder Image cap
Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Thẻ này thậm chí còn có nội dung dài hơn thẻ đầu tiên để hiển thị hành động có chiều cao bằng nhau.

Cập nhật lần cuối cách đây 3 phút 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">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.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Nề

Trong v4chúng tôi đã sử dụng một kỹ thuật chỉ CSS để bắt chước hành vi của các cột giống Masonry , nhưng kỹ thuật này có rất nhiều tác dụng phụ khó chịu . Nếu bạn muốn có kiểu bố cục này v5, bạn có thể sử dụng plugin Masonry. Masonry không được bao gồm trong Bootstrap , nhưng chúng tôi đã tạo một ví dụ demo để giúp bạn bắt đầu.

Sass

Biến

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;