How to create a 5 equal columns in Bootstrap 3?

Question

I am creating a selection link that has 10 containers. And what I want is to divide them into 5 equal columns. Now my problem is I want to expand the width of the columns. Means I dont have a container class in my parent row.

Here's my sample code:

<div id="categories-selections">
    <div class="col-md-2 no-padding">
        <img src="public/images/cat1.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat2.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat3.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat4.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat5.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat6.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat7.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat8.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat9.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat10.png" class="img-responsive" />
    </div>

</div>

Here's what should be the output:

And here's what I have:

That's all guys I hope you can help me.

Here's the sample fiddle: https://jsfiddle.net/mk7bdyey/

Answer 1

You could just create a whole new column all together

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

Next you need to define width of new classes in case of different media queries.

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

then you can just use like this

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

Answer 2

Adjust the padding from left and right as per your requirement to the div in which you have given id="categories-selections". you can put in-line css like style="padding-left:30px; padding-right:30px;"