Hướng dẫn cách chia 5 cột trong Boostrap 4 bằng CSS

Mặc định Bootstrap chỉ hỗ trợ số nào chia hết cho 2 và 3, ví dụ như: 12 / 2 = 6, 12 / 3 = 4 ( cột ). Nhưng đặt trường hợp bạn muốn 5 cột thì sao? Ở bài này mình sẽ hướng dẫn bạn.

12 / 5 = 2.4 thế nên mình sẽ đặt tên Class có prefix là 2dot4 ( 2 chấm 4 )

Chèn CSS vào file style.css của bạn như sau:

.col-2dot4, // extra small
.col-sm-2dot4, // small
.col-md-2dot4, // medium
.col-lg-2dot4, // large
.col-xl-2dot4 { // extra large
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
@media (min-width: 540px) {
    .col-sm-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 720px) {
    .col-md-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 960px) {
    .col-lg-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 1140px) {
    .col-xl-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}