How can I make custom column with bootstrap v3 ?

It’s a easy way to make if you follow the bootstrap structure and use this code.

Here is the example of 5 columns.

HTML :

<div class="row">
    <div class="col-md-5ths col-xs-6">
        <span>This is column 1</span>
    </div>
    <div class="col-md-5ths col-xs-6">
        <span>This is column 2</span>
    </div>
    <div class="col-md-5ths col-xs-6">
        <span>This is column 3</span>
    </div>
    <div class="col-md-5ths col-xs-6">
        <span>This is column 4</span>
    </div>
    <div class="col-md-5ths col-xs-6">
        <span>This is column 5</span>
    </div>
</div>

CSS:

.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;
    }
}

One Reply to “How can I make custom column with bootstrap v3 ?”

Leave a Reply

Your email address will not be published. Required fields are marked *


*