Jumbotron trong Bootstrap 4

Jumbotron là gì?

Jumbotron là một phần không thể thiếu trong giao diện trong Bootstrap, tác dụng chính của Jumbotron làm tạo ra một vùng hiển thị nội dung quan trọng nhất của website như thông báo, giới thiệu, chương trình khuyến mại của doanh nghiệp đó.

Note: Bên trong Jumbotron, bạn có thể đặt hầu như bất kì phần tử hay lớp HTML nào, bao gồm cả các thành phần trong Bootstrap.

Sử dụng thẻ <div> và lớp .jumbotron để tạo 1 Jumbotron:

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS...</p>
</div>

Jumbotron đầy đủ kích thước

Nếu bạn muốn jumbotron hiển thị đầy đủ kích thước (full-width) mà không có 4 góc bo tròn, bạn có thể thêm lớp .jumbotron-fluid và bên trong jumbotron thêm một lớp .container hoặc .container-fluid nằm trong phần tử div.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS...</p>
  </div>
</div>

Kết luận

Như vậy, qua bài viết này, chúng ta đã biết Jumbotron là gì, cách sử dụng Jumbotron trong Bootstrap 4 để tạo phần nội dung nổi bật. Tuy nhiên, để có thể thiết kế được 1 trang web đẹp, hoàn chỉnh, bạn cần phối hợp sử dụng thêm các lớp khác. Mời các bạn tiếp tục theo dõi series về Bootstrap 4.

Các bạn có thể tham khảo các bài viết hay về Bootstrap tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.