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/

can you please share live link or demo? that will be ease and also please describe little bit more. You want to have like first image and you have structure like second image? — Leo the lion, Nov 20 '15 at 07:30
You should use `.container-fluid` for full width sections. This question - http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap covers 20% width columns. — Josh Warren, Nov 20 '15 at 07:32
Yes in my current setup I came up with the output of the second image. — Jerielle, Nov 20 '15 at 07:32
Still same effect when I add container-fluid as a parent div. — Jerielle, Nov 20 '15 at 07:35
You're using `.col-md-offset` which is creating space on both sides instead of having 5 actual equal width columns. As I said, follow the directions on this question to add classes for 1/5 columns - http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap — Josh Warren, Nov 20 '15 at 07:46
Specifically, the 'For Bootstrap 3 and above' answer will solve your problem. The top answer is not correct. — Josh Warren, Nov 20 '15 at 07:54

score 7 · Accepted Answer · answered Nov 20 '15 at 08:22

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>

score 1 · Answer 2 · edited Nov 20 '15 at 08:05

1

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;"

edited Nov 20 '15 at 08:05

Yash Mehrotra

3,032
1
21
24

answered Nov 20 '15 at 07:36

Pushpa Sharma

11
1

Ok thanks I'll try. I also included the fiddle in my question. – Jerielle Nov 20 '15 at 07:44

How to create a 5 equal columns in Bootstrap 3?

2 Answers2