Bài 8: Jumbotron trong Bootstrap 4

0
388

Xin chào các bạn, hôm nay, mình sẽ giới thiệu với các bạn class .jumbotron trong Bootstrap 4.

Jumbotron là gì?

Jumbotron nghe khá là lạ đúng không nào. Để hiểu nó là gì, mình sẽ dịch theo trên trang chủ Bootstrap nhé. Jumbotron là class dùng để tạo ra 1 background màu xám, bọc các nội dung ở bên trong. Nó thường được dùng để mô tả thông tin quan trọng như là khuyến mãi, giới thiệu sản phẩm mới.

Quy định jumbotron trong Bootstrap 4

Ở trong Bootstrap 4, class này được định nghĩa như sau:

Ngoài class .jumbotron, Bootstrap còn cung cấp class .jumbotron-fluid cho những khối full độ rộng, không có padding 2 bên và không có bo viền các góc, như sau:

Sử dụng class jumbotron bằng cách khai báo thẻ div và gán class vào cho nó, nội dung bên trong thẻ div có thể sử dụng bất cứ components (thành phần) nào trong bootstrap 4.

Ví dụ

Dưới đây là ví dụ sử dụng class .jumbotron

Kết quả:

Nếu muốn jumbotron full width thì các bạn sử dụng class .jumbotron-fluid, sử dụng .jumbotron-fluid thì các bạn cần phải có cả class .jumbotron thì mới sử dụng được, ví dụ như sau:

Kết luận

Như vậy bài này mình đã giới thiệu xong class .jumbotron trong Bootstrap 4 để giúp các bạn có thể sử dụng class này vào định nghĩa những khối quan trọng, nổi bật.

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