Bootstrap 4 – Grid System

Grid System

Grid System hay còn gọi là hệ thống lưới. Grid System giúp bạn thiết kế layouts với hàng và cột. Grid System trong Bootstrap chia làm 12 cột, bạn có thể nhóm các cột lại để tạo cột rộng hơn.

Bạn không nhất thiết phải sử dụng hết 12 cột, có thể sử dụng ít hơn. Hệ thống Grid System này sẽ responsive, và tự động sắp xếp lại tùy theo màn hình.

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <style>
    .container-fluid  div[class^="col"] {
      border: 1px solid white;
      background: #f5f5f5;
      text-align: center;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  </style>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
  </div>
  <div class="row">
    <div class="col-sm-2">.col-sm-2</div>
    <div class="col-sm-3">.col-sm-3</div>
    <div class="col-sm-7">.col-sm-7</div>
  </div>
  <div class="row">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm-5">.col-sm-5</div>
    <div class="col-sm-7">.col-sm-7</div>
  </div>
  <div class="row">
    <div class="col-sm-6">.col-sm-6</div>
    <div class="col-sm-6">.col-sm-6</div>
  </div>
  <div class="row">
    <div class="col-sm-12">.col-sm-12</div>
  </div>
</div>
    
</body>
</html>

Trong ví dụ trên, ngoài cùng được bao bọc bởi .container, hay là .container-fluid.

Bên trong chia làm nhiều hàng, mỗi hàng là 1 class .row

Trong mỗi hàng được chia làm nhiều cột Bootstrap 4 chia làm 12 cột, col-sm-1 nghĩa là tạo 1 cột có độ rộng bằng 1, col-sm-6 tạo cột có độ rộng bằng 6 và col-sm-12 có độ rộng bằng 12.

sm áp dụng cho mà hình có kích thước Small (≥576px). Ngoài ra còn có thể dùng md, lg, xl…

Sắp xếp lại các cột

Thực hiện lại ví dụ trên, và thay sm thành md

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <style>
    .container-fluid  div[class^="col"] {
      border: 1px solid white;
      background: #f5f5f5;
      text-align: center;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  </style>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  <div class="row">
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-7">.col-md-7</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-5">.col-md-5</div>
    <div class="col-md-7">.col-md-7</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
  <div class="row">
    <div class="col-md-12">.col-md-12</div>
</div>
    
</body>
</html>

md áp dụng cho kích thước medium trở lên (≥768px).

Điều này có nghĩa khi kích thước màn hình <768px, các cột sẽ được sắp xếp lại, mỗi cột sẽ chiếm toàn bộ chiều rộng màn hình

Kích thước Grid

Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px
Tên tiền tố .col- .col-sm- .col-md- .col-lg- .col-xl-
  • Containers : Hệ thống Grid phải được đặt trong 1 class container (.container hay .container-fluid) nó sẽ bù trừ padding của row và canh giữa.
  • Rows và Columns : mỗi row chứa nhiều col, mỗ col chứa nội dung. Mỗi col cũng có thể chứa row con.
  • Padding : Giữa các cột có padding, padding cột đầu tiên và cuối cùng được bù đắp bởi margin (âm) của .row
  • Số cột mỗi hàng : Có thể sử dụng ít hơn 12 cột. Nếu hơn 12 cột, phần dư sẽ được tác ra hàng mới. Ví dụ có nếu 1 hàng chứa col-md-10 và col-md-3 thì phần col-md-3 sẽ được tách ra 1 hàng mới.
  • Grid Classes : Grid Classes chỉ áp dụng khi kích thước màn hình lớn hơn hay bằng kích thước class qui định. Ví dụ .col-sm-* sẽ áp dụng việc chia cột đối với màn hình medium, large, và extra large (>=768px) (Trừ trường hợp dùng Multiple Classes).
  • Multiple Classes : Có thể sử dụng nhiều class khác nhau cho 1 cột. Ví dụ class=”col-sm-10 col-md-6″ như vậy cột này sẽ có kích thước 10 col khi ở màn hình medium nhưng lại có kích thước 6 col khi ở màn hình large, và extra large.