Trang chủ » Blog » Jumbotron trong Bootstrap 4

Jumbotron trong Bootstrap 4

bởi CodeGym | 26/12/2023 15:36 | Blog

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.

Jumbotron trong Bootstrap 4

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>

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.

Dịch từ: https://www.w3schools.com/bootstrap4/bootstrap_jumbotron.asp

Đăng ký nhận bộ tài liệu học Java trên 2 trang giấy tại đây

Xem thêm: Java Coding Bootcamp là gì? Tổng quan về Java Coding Bootcamp

Download - Giáo trình thuật toán

7 + 6 =

Tags: Bootstrap

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

15 + 3 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM