Source

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.

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 .

100% x180
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 class="card-img-top" src="..." alt="Card image cap">
  <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.

Nắp ảnh [100% x180]

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 class="card-img-top" src="..." alt="Card image cap">
  <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.

  • Cras justo odio
  • Dapibus ac Operatingisis in
  • Vestibulum at eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Đặc sắc
  • Cras justo odio
  • Dapibus ac Operatingisis in
  • Vestibulum at eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</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.

Nắp ảnh [100% x180]
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ẻ.

  • Cras justo odio
  • Dapibus ac Operatingisis in
  • Vestibulum at eros
Liên kết thẻ Một liên kết khác 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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-right" 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" 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" href="#">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" href="#">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ừ thêm "mũ hình ảnh" ở hai đầu 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ẻ.

100% x180
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

100% x180 
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</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.

100% x270
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 class="card-img" src="..." alt="Card image">
  <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>

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 các tiện ích văn bản và 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-white 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-white 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 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 .sr-onlylớ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 text-warning">
    <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 text-info">
    <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 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ẻ sử dụng display: flex;để đạt được kích thước đồng nhất của chúng.

100% x180
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

100% x180
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

100% x180
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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 các nhóm thẻ có chân trang, nội dung của chúng sẽ tự động xếp hàng.

100% x180
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
100% x180
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
100% x180
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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Bộ bài

Bạn cần một bộ thẻ có chiều rộng và chiều cao bằng nhau không gắn với nhau? Sử dụng bộ bài.

100% x200
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.

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

100% x200
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

100% x200
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-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

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

100% x180
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
100% x180
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
100% x180
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-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Cột thẻ

Các thẻ có thể được sắp xếp thành các cột giống như Masonry.card-columns chỉ với CSS bằng cách gói chúng vào trong . Các thẻ được xây dựng với các thuộc tính CSS columnthay vì flexbox để dễ dàng căn chỉnh hơn. Các thẻ được sắp xếp theo thứ tự từ trên xuống dưới và từ trái sang phải.

Đứng lên! Số dặm của bạn với các cột thẻ có thể khác nhau. Để ngăn chặn các thẻ bị vỡ qua các cột, chúng ta phải đặt chúng thành display: inline-blockgiải column-break-inside: avoidpháp chống đạn.

100% x160
Tiêu đề thẻ chuyển sang một dòng mới

Đâ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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

Ai đó nổi tiếng trong Tiêu đề nguồn
100% x160
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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat.

Ai đó nổi tiếng trong Tiêu đề nguồn
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

100% x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

Ai đó nổi tiếng trong Tiêu đề nguồn
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-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <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 class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </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 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>

Các cột thẻ cũng có thể được mở rộng và tùy chỉnh với một số mã bổ sung. Hình bên dưới là phần mở rộng của .card-columnslớp bằng cách sử dụng cùng một CSS mà chúng tôi sử dụng — các cột CSS— để tạo một tập hợp các lớp đáp ứng để thay đổi số lượng cột.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}