Chia 5 cột trong bootstrap

Hệ thống 12 cột của bootstrap có thể dễ dàng chia thành 1,2,3,4,6 cột. Nhưng để chia thành 5 cột thì như thế nào?

Cách 1: Tự định nghĩa css

Thêm css sau vào cuối file bootstrap.css ; ở đây ta tự định nghĩa class theo định nghĩa mặc định của bootstrap dành cho cột.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {     position: relative;     min-height: 1px;     padding-right: 10px;     padding-left: 10px; } .col-xs-5ths {     width: 20%;     float: left; } @media (min-width: 768px) {     .col-sm-5ths {         width: 20%;         float: left;     } } @media (min-width: 992px) {     .col-md-5ths {         width: 20%;         float: left;     } } @media (min-width: 1200px) {     .col-lg-5ths {         width: 20%;         float: left;     } }

HTML: sử dụng tên class đã khai báo như các class chia cột của bootstrap

1 2 3 4

<div class="row">     <div class="col-xs-5ths">     </div> </div>

Cách 2: Tùy chỉnh động dựa vào LESS và SASS.

LESS: Nếu bạn custom bằng LESS thì sẽ tạo ra cột 2.4 (Tức là 2.4*5 = 12)

1 2 3 4 5 6 7 8 9

.col-lg-2-4{     .make-lg-column(2.4) } .col-md-2-4{     .make-md-column(2.4) } .col-sm-2-4{     .make-sm-column(2.4) }

SASS: Nếu sử dụng SASS thì tương tự LESS

1 2 3 4 5 6 7 8 9

.col-lg-2-4{     @include make-lg-column(2.4) } .col-md-2-4{     @include make-md-column(2.4) } .col-sm-2-4{     @include make-sm-column(2.4) }