Bootstrap 4 - Bootstrap Jumbotron

Bootstrap Jumbotron

Jumbotron là một phần không thể thiếu ở 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.

Jumbotron chính là 1 class, lớp dùng để tạo ra một background màu xám, nó được bọc các nội dung ở bên trong và thường được dùng để mô tả những thông tin quan trọng như khuyến mãi, giới thiệu hay đưa ra thông báo quan trọng của cửa hàng hay doanh nghiệp trên chính website đó.

Lớp .jumbotron trong thẻ <div> được sử dụng để tạo jumbotron.


Ví dụ lớp 

Nếu bạn muốn jumbotron không kéo dài đến mép màn hình. Đặt lớp jumbotron trong lớp container,

Đặt jumbotron bên trong <div class = "container">.

Ví dụ:

<div class="container">  
  <div class="jumbotron">  
    <h1>This is Jumbotron inside container!</h1>        
    <p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>  
  </div>  
  <p>This is some text.</p>        
  <p>This is another text.</p>        
</div>  

Xem ví dụ 


Lớp Jumbotron đặt ngoài lớp Container

Khi bạn muốn jumbotron kéo dài đến các cạnh màn hình.

Đặt jumbotron bên ngoài <div class="container">.

Ví dụ:

<div class="jumbotron">  
  <h1>This is Jumbotron outside container!</h1>        
  <p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>  
</div>  
  
<div class="container">  
  <p>This is some text.</p>        
  <p>This is another text.</p>        
</div>  

Xem ví dụ 


Jumbotron hiện thị tràn màn hình

Để có được một jumbotron không có đường viền tròn, bạn phải thêm lớp .jumbotron-liquid và .container hoặc .container-liquid bên trong nó.

Ví dụ:

<div class="jumbotron jumbotron-fluid">  
  <div class="container">  
    <h1>Full-width Jumbotron</h1>          
  <p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>  
</div>  
  
<div class="container">  
  <p>This is some text.</p>        
  <p>This is another text.</p>        
</div>  

Xem ví dụ


Làm tiêu đề trang

Một website sẽ có một hoặc nhiều trang (web) khác nhau. Và mỗi trang web thường sẽ có một tiêu đề để phân biệt giữa chúng. Nó thêm một đường ngang dưới tiêu đề.

Lớp .page-header được sử dụng để tạo tiêu đề trang.

Ví dụ:

<div class="container">  
  <div class="page-header">  
    <h1>Example Page Header</h1>        
  </div>  
  <p>This is some text.</p>        
  <p>This is another text.</p>        
</div>  
  

Xem ví dụ