Jumbotron

Thành phần nhẹ, linh hoạt để hiển thị nội dung theo phong cách đơn vị anh hùng.

Một thành phần nhẹ, linh hoạt có thể tùy chọn mở rộng toàn bộ khung nhìn để giới thiệu các thông điệp tiếp thị chính trên trang web của bạn.

Chào thế giới!

Đây là một đơn vị anh hùng đơn giản, một thành phần kiểu jumbotron đơn giản để kêu gọi sự chú ý nhiều hơn đến nội dung hoặc thông tin nổi bật.

Nó sử dụng các lớp tiện ích cho kiểu chữ và khoảng cách để tạo khoảng trống cho nội dung bên trong vùng chứa lớn hơn.

Tìm hiểu thêm

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

Để làm cho jumbotron có chiều rộng đầy đủ và không có góc tròn, hãy thêm .jumbotron-fluidlớp bổ trợ và thêm một .containerhoặc .container-fluidbên trong.

Jumbotron chất lỏng

Đây là một jumbotron đã được sửa đổi chiếm toàn bộ không gian ngang của cha mẹ của nó.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>