Trong bài viết này chúng ta sẽ học cách sử dụng Jumbotron trong Bootstrap 4 để thu hút sự chú ý về một nội dung hoặc thông tin cụ thể. Cùng bắt tay vào bài học nhé các bạn!
Jumbotron Bootstrap 4 là gì
Một jumbotron biểu thị một hộp lớn màu xám để kêu gọi sự chú ý nhiều hơn đến một số nội dung hoặc thông tin đặc biệt. Bên trong jumbotron, bạn có thể đặt gần như bất kỳ HTML hợp lệ nào, bao gồm các phần tử hay lớp Bootstrap khác.
Sử dụng phần tử <div> với lớp .jumbotron để tạo jumbotron:
Ví dụ:
<div class="jumbotron"> <h3>Pháo Hoa Giao Thừa Dương Lịch</h3> <p>Giao thừa tết dương lịch này Hà Nội tổ chức bắn pháo hoa tại 3 địa điểm...</p> </div>
Jumbotron đầy đủ kích thước
Nếu bạn muốn một jumbotron có chiều rộng đầy đủ mà không có đường viền tròn, hãy thêm lớp .jumbotron-liquid và .container hoặc .container-liquid bên trong nó:
<div class="container"> <div class="jumbotron jumbotron-fluid"> <h3>Pháo Hoa Giao Thừa Dương Lịch</h3> <p>Giao thừa tết dương lịch này Hà Nội tổ chức bắn pháo hoa tại 3 địa điểm...</p> </div> </div>
Lời kết
Đôi lúc cần thu hút sự chú ý đặc biệt vào nội dung nào đó của trang web chúng ta cần sử dụng jumbotron trong bài này. Thế nhưng cần sử dụng nó cho hợp lý để tránh việc web bị rối. Chúc các bạn thành công.
