Bài 10: Card trong Bootstrap v5.3

Bài 10: Card trong Bootstrap v5.3

Card trong Bootstrap sẽ giúp bạn tạo các khối có chứa header, image, content, footer…

Bạn thường bắt gặp trên website các phần như bài viết, thông tin nhóm tác giả….

Hôm nay sonnguyenaz.com sẽ cùng các bạn tìm hiểu nhé.

Card trong Bootstrap v5.3 có gì mới?

Card trong Bootstrap v5.3 khác với các ver cũ là bạn có thể chỉnh sửa các class.

Card có thể chứa các nội dung như hình ảnh, văn bản, liên kết, các nút bấm được trình bày khoa học và hợp lý.

Cấu trúc đơn giản:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Tiêu đề</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Tiêu đề phụ</h6>
    <p class="card-text">Phần nội dung.</p>
    <a href="#" class="btn btn-primary">Nút bấm</a>
  </div>
</div>

Một số ví dụ về Card

Card bao gồm hình ảnh trong Bootstrap

Như đã nói ở trên thì Card trong Bootstrap có thể bao gồm hình ảnh, bạn thường gặp trong phần hiển thị các bài viết hoặc thông tin tác giả.

Code ví dụ:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="card" style="width: 18rem;"> 
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp" class="card-img-top" alt="...">
		<div class="card-body">
			<h5 class="card-title">Bài 9: Sử dụng Button trong Bootstrap để tạo nút</h5>
			<p class="card-text">Button trong Bootstrap dùng để tạo các nút bấm, thường được sử dụng trong các biểu mẫu hoặc hộp thoại trên trang web.</p>
		</div>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

card-co-dung-hinh-anh-trong-bootstrap

Card bao gồm liên kết

Liên kết trong Card được nằm trong card-body, và gọi class card-link

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="card" style="width: 18rem;"> 
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp" class="card-img-top" alt="...">
		<div class="card-body">
			<h5 class="card-title">Bài 9: Sử dụng Button trong Bootstrap để tạo nút</h5>
			<p class="card-text">Button trong Bootstrap dùng để tạo các nút bấm, thường được sử dụng trong các biểu mẫu hoặc hộp thoại trên trang web.</p>
			<a href="https://sonnguyenaz.com/bai-9-su-dung-button-trong-bootstrap-de-tao-nut/" class="card-link">Xem thêm</a>
		</div>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

card-kem-theo-link-lien-ket

Card bao gồm List groups

Chúng ta có thể thêm các list group vào body card:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="card" style="width: 18rem;"> 
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp" class="card-img-top" alt="...">
		<div class="card-body">
			<h5 class="card-title">Bài 9: Sử dụng Button trong Bootstrap để tạo nút</h5>
			<p class="card-text">Button trong Bootstrap dùng để tạo các nút bấm, thường được sử dụng trong các biểu mẫu hoặc hộp thoại trên trang web.</p>
			<ul class="list-group list-group-flush">
			<li class="list-group-item">btn-primary</li>
			<li class="list-group-item">btn-secondary</li>
			<li class="list-group-item">btn-success</li>
			</ul>
			<a href="https://sonnguyenaz.com/bai-9-su-dung-button-trong-bootstrap-de-tao-nut/" class="card-link">Xem thêm</a>
		</div>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

card-kem-theo-list-group

Căn chỉnh nội dung trong Card

Mặc định nội dung được căn chỉnh sang bên trái, nhưng để điều chỉnh bạn cũng có thể sử dụng thuộc tính text-centertext-end để căn giữa hoặc căn lề sang phải:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="card text-center" style="width: 18rem;"> 
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp" class="card-img-top" alt="...">
		<div class="card-body">
			<h5 class="card-title">Bài 9: Sử dụng Button trong Bootstrap để tạo nút</h5>
			<p class="card-text">Button trong Bootstrap dùng để tạo các nút bấm, thường được sử dụng trong các biểu mẫu hoặc hộp thoại trên trang web.</p>
			<ul class="list-group list-group-flush">
			<li class="list-group-item">btn-primary</li>
			<li class="list-group-item">btn-secondary</li>
			<li class="list-group-item">btn-success</li>
			</ul>
			<a href="https://sonnguyenaz.com/bai-9-su-dung-button-trong-bootstrap-de-tao-nut/" class="card-link">Xem thêm</a>
		</div>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

can-chinh-noi-dung-trong-card

Tạo Card Group trong Bootstrap

Để lạo Card Group trong Bootstrap bạn chỉ cần đưa các card vào một <div class=”card-group”>:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="card-group">
	<div class="card text-center" style="width: 18rem;"> 
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp" class="card-img-top" alt="...">
		<div class="card-body">
			<h5 class="card-title">Bài 9: Sử dụng Button trong Bootstrap để tạo nút</h5>
			<p class="card-text">Button trong Bootstrap dùng để tạo các nút bấm, thường được sử dụng trong các biểu mẫu hoặc hộp thoại trên trang web.</p>
			<ul class="list-group list-group-flush">
			<li class="list-group-item">btn-primary</li>
			<li class="list-group-item">btn-secondary</li>
			<li class="list-group-item">btn-success</li>
			</ul>
			<a href="https://sonnguyenaz.com/bai-9-su-dung-button-trong-bootstrap-de-tao-nut/" class="card-link">Xem thêm</a>
		</div>
	</div>
	<div class="card text-center" style="width: 18rem;"> 
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp" class="card-img-top" alt="...">
		<div class="card-body">
			<h5 class="card-title">Bài 9: Sử dụng Button trong Bootstrap để tạo nút</h5>
			<p class="card-text">Button trong Bootstrap dùng để tạo các nút bấm, thường được sử dụng trong các biểu mẫu hoặc hộp thoại trên trang web.</p>
			<ul class="list-group list-group-flush">
			<li class="list-group-item">btn-primary</li>
			<li class="list-group-item">btn-secondary</li>
			<li class="list-group-item">btn-success</li>
			</ul>
			<a href="https://sonnguyenaz.com/bai-9-su-dung-button-trong-bootstrap-de-tao-nut/" class="card-link">Xem thêm</a>
		</div>
	</div>
	<div class="card text-center" style="width: 18rem;"> 
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp" class="card-img-top" alt="...">
		<div class="card-body">
			<h5 class="card-title">Bài 9: Sử dụng Button trong Bootstrap để tạo nút</h5>
			<p class="card-text">Button trong Bootstrap dùng để tạo các nút bấm, thường được sử dụng trong các biểu mẫu hoặc hộp thoại trên trang web.</p>
			<ul class="list-group list-group-flush">
			<li class="list-group-item">btn-primary</li>
			<li class="list-group-item">btn-secondary</li>
			<li class="list-group-item">btn-success</li>
			</ul>
			<a href="https://sonnguyenaz.com/bai-9-su-dung-button-trong-bootstrap-de-tao-nut/" class="card-link">Xem thêm</a>
		</div>
	</div>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

su-dung-card-group

Như bạn đã thấy nếu đưa vào 1 Card group thì các thẻ không có khoảng cách.

Sử dụng Gird để hiển thị nhiều Card

Bạn nên đọc lại bài 1 để hiểu thêm về Gird System trong Bootstrap nhé.

Ví dụ ta muốn hiển thị 3 thẻ là 3 bài viết:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="row row-cols-1 row-cols-md-3 g-4">
	<div class="col">
	<div class="card text-center" style="width: 18rem;"> 
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp" class="card-img-top" alt="...">
		<div class="card-body">
			<h5 class="card-title">Bài 9: Sử dụng Button trong Bootstrap để tạo nút</h5>
			<p class="card-text">Button trong Bootstrap dùng để tạo các nút bấm, thường được sử dụng trong các biểu mẫu hoặc hộp thoại trên trang web.</p>
			<ul class="list-group list-group-flush">
			<li class="list-group-item">btn-primary</li>
			<li class="list-group-item">btn-secondary</li>
			<li class="list-group-item">btn-success</li>
			</ul>
			<a href="https://sonnguyenaz.com/bai-9-su-dung-button-trong-bootstrap-de-tao-nut/" class="card-link">Xem thêm</a>
		</div>
	</div>
	</div>
	<div class="col">
	<div class="card text-center" style="width: 18rem;"> 
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp" class="card-img-top" alt="...">
		<div class="card-body">
			<h5 class="card-title">Bài 9: Sử dụng Button trong Bootstrap để tạo nút</h5>
			<p class="card-text">Button trong Bootstrap dùng để tạo các nút bấm, thường được sử dụng trong các biểu mẫu hoặc hộp thoại trên trang web.</p>
			<ul class="list-group list-group-flush">
			<li class="list-group-item">btn-primary</li>
			<li class="list-group-item">btn-secondary</li>
			<li class="list-group-item">btn-success</li>
			</ul>
			<a href="https://sonnguyenaz.com/bai-9-su-dung-button-trong-bootstrap-de-tao-nut/" class="card-link">Xem thêm</a>
		</div>
	</div>
	</div>
	<div class="col">
	<div class="card text-center" style="width: 18rem;"> 
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp" class="card-img-top" alt="...">
		<div class="card-body">
			<h5 class="card-title">Bài 9: Sử dụng Button trong Bootstrap để tạo nút</h5>
			<p class="card-text">Button trong Bootstrap dùng để tạo các nút bấm, thường được sử dụng trong các biểu mẫu hoặc hộp thoại trên trang web.</p>
			<ul class="list-group list-group-flush">
			<li class="list-group-item">btn-primary</li>
			<li class="list-group-item">btn-secondary</li>
			<li class="list-group-item">btn-success</li>
			</ul>
			<a href="https://sonnguyenaz.com/bai-9-su-dung-button-trong-bootstrap-de-tao-nut/" class="card-link">Xem thêm</a>
		</div>
	</div>
	</div>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả: Các thẻ sẽ tự tách nhau cho phù hợp với màn hình hiển thị

hien-thi-nhieu-card-bang-gird

Lời kết

Đối với Card trong Bootstrap được cho là sử dụng vào thực tế rất nhiều, đa số các trang web hiện này vì bạn có thể cho bất cứ những gì mình muốn vào trong 1 khối, trông đẹp mặt và tạo sự logic.

Bài viết cùng chủ đề:

Cảm ơn các bạn đã theo dõi.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *