Jumbotron là gì? Cách sử dụng Jumbotron trong Bootstrap

Jumbotron là gì?

Jumbotron đôi khi còn được gọi là jumbovision là màn hình video sử dụng công nghệ truyền hình màn hình lớn (video wall). Công nghệ này ban đầu được phát triển vào đầu những năm 1980 bởi Mitsubishi Electric và Sony, công ty đã đặt JumboTron làm thương hiệu vào năm 1985. Jumbotron thường được sử dụng trong các sân vận động và địa điểm tổ chức buổi hòa nhạc để hiển thị những bức ảnh cận cảnh của sự kiện, cũng như những nơi công cộng ngoài trời (ví dụ như quảng trường, phố đi bộ).

Còn trong Bootstrap, Jumbotron là một box màu xám chứa văn bản, với mục đích là tăng thêm sự chú ý cho văn bản trong đó. Khi cảm thấy văn bản/thông tin nào thật quan trọng, cần phải làm cho nó xuất hiện thật lớn, thật gây chú ý, bạn chỉ cần viết nó trong Jumbotron.

Cách sử dụng Jumbotron trong Bootstrap

Bên trong Jumbotron bạn có thể đặt gần như bất cứ thành phần HTML nào, thậm chí cả các thành phần, class của Bootstrap.

Sử dụng <div> với class .jumbotron để tạo một Jumbotron như ví dụ dưới đây:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Quantrimang.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>Jumbotron</h1>      
    <p>Đây là thông tin cần làm nổi bật  - Quantrimang.com.</p>
  </div>
  <p>Đây là thông tin bình thường.</p>      
  <p>Đây là văn bản bình thường khác.</p>      
</div>

</body>
</html>

Khi đó bạn sẽ nhận được kết quả sau:

Jumbotron với chiều rộng full

Nếu bạn muốn tạo một Jumbotron với chiều rộng đầy đủ, không bo góc hãy thêm class .jumbotron-fluid và .container hoặc .container-fluid bên trong nó, như thế này này:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Quantrimang.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Jumbotron</h1>      
    <p>Đây là thông tin cần làm nổi bật  - Quantrimang.com.</p>
  </div>
  </div>
  <div class="container">
  <p>Đây là thông tin bình thường.</p>      
  <p>Đây là văn bản bình thường khác.</p>      
</div>

</body>
</html>

Và kết quả sẽ xuất hiện như dưới đây:

Đó hết rồi, cái tên nghe có vẻ lạ thôi, chứ cách sử dụng Jumbotron cũng khá đơn giản bạn nhỉ.