[Bootstrap 4] Phần 7: Hình ảnh

Cập nhật lần cuối: 05/10/2018 lúc 18:05:41

Thể loại: Bootstrap

Trong Bootstrap 4, bạn có thể hiển thị hình ảnh với 4 góc bo tròn, hình tròn hay hình có khung ảnh đẹp mắt bao quanh.

Bài viết sử dụng hình ảnh mẫu với URL là: https://www.dammio.com/wp-content/uploads/2018/10/girl.jpg

Hình có góc bo tròn

Để hiển thị hình có góc bo tròn, bạn có thể thêm lớp .rounded vào một thẻ hình ảnh.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ hình ảnh trong Bootstrap 4 --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h3>Hình ảnh có 4 góc bo tròn với lớp .rounded --- dammio.com</h3>
<div class="row"> 
	<div class="col-lg-4 col-md-4">
		<img src="girl.jpg" class="rounded" alt="A girl" width="300">
	</div>
</div>
</div>
</body>
</html>

Hình ảnh tròn

Bạn chỉ cần lớp .rounded-circle là có thể biến hình ảnh cần hiển thị thành hình tròn.

<img src="girl.jpg" class="rounded-circle" alt="A girl" width="300">

Hình thu nhỏ

Nếu bạn muốn tạo hình thu nhỏ có khung viền xung quanh thì bạn có thể sử dụng lớp .img-thumbnail như ví dụ sau.

<img src="girl.jpg" class="img-thumbnail" alt="A girl" width="300">

Canh chỉnh hình ảnh

Hai lớp .float-right và .float-left dùng để canh chỉnh hình ảnh xuất hiện ở bên trái hoặc bên phải nội dung như sau.

...
<div class="container">
<h3>Căn chỉnh hình ảnh trong Bootstrap 4 --- dammio.com</h3>
<div class="row"> 

	<div class="col-md-12 col-lg-12">
		<img src="girl.jpg" class="float-left" width="300"> 
		<img src="girl.jpg" class="float-right" width="300">
	</div>

</div>
</div>
...

Căn giữa hình ảnh

Để căn giữa hình ảnh, bạn có thể dùng lớp .mx-auto (margin:auto) và .d-block (display:block) vào hình ảnh cần căn giữa.

...
<div class="container">
<h3>Căn giữa hình ảnh trong Bootstrap 4 --- dammio.com</h3>
<div class="row"> 

	<div class="col-md-12 col-lg-12">
		<img src="girl.jpg" class="mx-auto d-block" width="300">
	</div>

</div>
</div>
...

Tính năng hiển thị hình ảnh đáp ứng theo kích thước màn hình của các thiết bị khác nhau là một tính năng tuyệt vời của Bootstrap. Để thực hiện hiển thị hình ảnh đáp ứng, đơn giản là bạn chỉ cần thêm lớp .img-fluid vào hình cần thêm. Khi đó lớp này sẽ áp dụng phong cách max-width: 100%; và height: auto; vào hình ảnh.

<div class="container">
<h3>Hình ảnh đáp ứng trong Bootstrap 4 --- dammio.com</h3>
<div class="row"> 

	<div class="col-md-4 col-lg-4">
		<img class="img-fluid" src="girl.jpg">
	</div>

</div>
</div>

Kết luận

Như vậy, bài viết đã chỉ cho bạn cách dùng một số lớp để hiển thị hình ảnh trong Bootstrap 4. Mời bạn tiếp tục theo dõi bài tiếp theo.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Liên quan: [Bootstrap 4] Phần 9: Các cảnh báo (Alerts) trong Bootstrap

Trích dẫn bài viết

APA:
Dammio. (2018). [Bootstrap 4] Phần 7: Hình ảnh. https://www.dammio.com/2018/10/02/bootstrap-4-phan-7-hinh-anh.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[Bootstrap 4] Phần 7: Hình ảnh}, year = {2018}, url = {https://www.dammio.com/2018/10/02/bootstrap-4-phan-7-hinh-anh}, urldate = {2025-10-29} }

Kết nối