FullStack Academy

Jumbotron trong Bootstrap 4

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 hoặc bật kì cái gì bạn muốn.

Class Jumbotron được định nghĩa như sau trong Bootstrap 4:

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}
 
@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

Ngoài ra, nếu cần một khối có độ rộng full-width không có padding 2 bên và không có bo viền thì chúng ta cũng được bootstrap cung cấp 1 class với tên gọi .jumbotron-fluid

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

Class .jumbotron




Class .jumbotron-fluid:



Kết luận

Vậy là chúng ta đã biết cách sử dụng class Jumbotron của Bootstrap rồi nhé. Chúng ta sẽ gặp lại nhau trong bài giảng tiếp theo.