Girdsystem

Girdsystem là một hệ thống lưới các thành phần được sử dụng trong thiết kế giao diện . Trong bootstrap gird system được chia thành 12 cột , trong đó mỗi cột có một tỷ lệ nhất định so với kích thước của layout . Khi sử dụng các đơn vị là các col thì chúng ta không cần phải chỉ định kích thước cụ thể của thành phần đang xét như 200px , 500px mà thay vào đó kích thước của các col sẽ đươc tính theo tỷ lệ % nên sẽ thuận tiện cho việc hiện thi đa màn hình . Các columns  mà bootstrap cung cấp : Col-xs : định nghĩa cho các thành phần có kích thước nhỏ và dung cho các dòng thiết bị có kích thước nhỏ hơn 768px . Khi sử dụng col-xs các thành phần sẽ luôn được đặt cạnh nhau kể cả khi kích thước của cửa sỗ màn hình có bị thu nhỏ lại

Col-sm : Định nghĩa cho các thành phần có kích thước tầm trung có kích thước lớn hơn 768px ( dành cho máy tính bảng - loại này ít được sử dụng )

Col-md : Định nghĩa cho các thành phần có kích thước tầm trung có kích thước lơn hơn 922px . Đây là thành phần được sử dụng nhiều nhất hiện nay trong quá trình xây dựng giao diện người dung . Ưu điểm của thành phần này là nó có thể tự động chuyển đổi vị trí hiện thị khi kích thước cửa sổ thay đổi để đảm bảo các thành phần bên trong được hiện thị một cách tối đa .

Col-lg : Định nghĩa cho các thành phần có kích thước tầm trung có kích thước lơn hơn 1200px đồng nghĩa với việc loại màn hình nào có cũng hỗ trợ .

Ngoài việc sử dụng col một các riêng rẻ ta có thể sử dụng kết hợp các col với nhau để thực hiện việc responsive trên trình duyệt . Ví dụ với đoạn code sau :

<div class="row"> <div class="col-xs-6 col-md-3" id="col-1">.col-xs-6 .col-md-3</div> <div class="col-xs-6 col-md-3" id="col-2">.col-xs-6 .col-md-3</div> <div class="col-xs-6 col-md-3" id="col-3">.col-xs-6 .col-md-3</div> <div class="col-xs-6 col-md-3" id="col-4">.col-xs-6 .col-md-3</div> </div>

Thì khi chạy trình duyệt với kích thước lơn hơn 922px ta sẽ được 4 cột có kích thước bằng nhau được định nghĩa là col-md-3 nhưng sau đó nếu thu nhỏ cửa sổ xuống thì ta sẽ thu được kết quả hiện thị là 2 hàng mà mỗi hàng gồm 2 cột được định nghĩa là col-xs-6 trong đó #col-1 và #col-2 sẽ ở hàng trên và #col-3 và #col-4 ở hàng dưới