Bài 7: Hình ảnh trong Bootstrap 4

0
280

Xin chào các bạn, bài hôm nay mình sẽ tiếp tục giới thiệu về 1 số class mẫu trong Bootstrap 4 để định dạng trang trí hình ảnh.

Trong Bootstrap 4, các bạn có thể hiển thị hình ảnh với nhiều định dạng như bo tròn 4 góc, hình tròn hay hình có khung ảnh bao quanh.

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

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

Ví dụ:

Kết quả:

Hình ảnh tròn

Sử dụng class .rounded-circle để biến hình ảnh iển thị thành hình tròn.

Ví dụ:

Kết quả:

Hình ả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

Ví dụ:

Kết quả:

Căn chỉnh lề hình ảnh

Hai class .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:

Ví dụ:

Kết quả:

Căn giữa hình ảnh

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

Ví dụ:

Kết quả:

Hình ảnh reponsive

Tính năng hiển thị hình ảnh 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 reponsive trên các thiết bị, đơ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.

Ví dụ:

Kết quả:

Kết luận

Như vậy, bài viết đã chỉ cho bạn cách dùng một số class để 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.Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây