Bootstrap Jumbotron

Trong hướng dẫn này, bạn sẽ học cách tạo jumbotron trong Bootstrap.

Hiển thị nội dung quan trọng với Jumbotron

Bootstrap jumbotron cung cấp một cách tuyệt vời để giới thiệu nội dung hoặc thông tin quan trọng trên một trang web. Tuy nhiên, thành phần jumbotron mặc định của Bootstrap đã bị loại bỏ khỏi phiên bản 5. Tuy nhiên, bạn vẫn có thể tạo jumbotron tùy chỉnh bằng cách sử dụng các lớp tiện ích có sẵn của Bootstrap.

Hãy xem một ví dụ để hiểu cách tạo jumbotron tùy chỉnh:

<div class="p-5 mb-4 bg-light border rounded-3">
    <h1>Learn to Create Websites</h1>
    <p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://comdy.vn" target="_blank">comdy.vn</a> you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.</p>
    <p><a href="https://comdy.vn" target="_blank" class="btn btn-primary btn-lg">Start learning today</a></p>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Mẹo: Lớp .p-5 áp dụng phần đệm 3rem cho tất cả bốn cạnh, trong khi lớp .mb-4 áp dụng lề dưới của 1.5rem cho jumbotron. Tương tự như vậy, các lớp .border và .rounded-3 áp dụng đường viền và bán kính đường viền .3rem cho cả bốn cạnh, tương ứng.

Bạn cũng có thể tạo jumbotron có chiều rộng đầy đủ với nội dung được căn giữa, không có góc và đường viền tròn, bằng cách chỉ cần gói nội dung bên trong của nó trong phần tử .container và xóa lớp .border và .rounded-* khỏi phần tử bao bọc, như được hiển thị trong ví dụ sau:

<div class="py-5 mb-4 bg-light">
    <div class="container">
        <h1>Learn to Create Websites</h1>
        <p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://comdy.vn" target="_blank">comdy.vn</a> you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.</p>
        <p><a href="https://comdy.vn" target="_blank" class="btn btn-primary btn-lg">Start learning today</a></p>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Thay đổi màu của Jumbotron

Tương tự, bạn có thể tạo các biến thể khác của jumbotron bằng cách sử dụng các lớp tiện ích màu và nền của Bootstrap. Ví dụ sau sẽ tạo một jumbotron biến thể tối.

<div class="p-5 mb-4 bg-dark text-white rounded-3">
    <h1>Learn to Create Websites</h1>
    <p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://comdy.vn" target="_blank" class="text-white">comdy.vn</a> you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.</p>
    <p><a href="https://comdy.vn" target="_blank" class="btn btn-light btn-lg">Start learning today</a></p>
</div>

Kết quả của ví dụ trên sẽ giống như sau: