CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Cheesus Toast
Cheesus Toast

Reputation: 1073

Center a dynamic number of col divs inside a row in Bootstrap

I would like to center a dynamic number of col items in a row in bootstrap. I have tried to find a way of doing this with Bootstrap but it appears to be completely missing.

As people who use bootstrap will know - the cols move over to the far left. You can put a dynamic number of col items into a row - it does not need to add up to 12 (so please don't suggest that it does). This is important if you are going to array out a list of items dynamically. You can have as many or as few cols in a row as you want.

All I wish to do is make sure that - regardless of how many items there are in the row - they sit in the center of the window. They will all be something like: class="col-lg-2 col-md-3 col-sm-4 col-xs-6". Example:

<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    Something here 1
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    Something here 2
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    Something here 3
                </div>
            </div>
        </div>
    </div>
</div>

There could be 1, 2, 3 or however many. I do not know because it will be how ever many items there are in the list being arrayed out by the server. Either way I need that whole row, regardless of how many panels are in it, to be centered.

I am aware that I could program the divs using server side code in the view but that would get pretty complicated. There must be some way to achieve this in Bootstrap! I just have not found it. I have read a huge amount of SO answers but none of them relate to what I wish to do. I do not know why it does not let you simply put the row in the center - very frustrating.

I just want to center the row cols.

Upvotes: 5

Views: 4979

Answers (1)

Nadeem Manzoor
Nadeem Manzoor

Reputation: 750

You can use centered class on the row and use following css working fiddle attached.

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

http://jsfiddle.net/ug4fzcjd/64/

Upvotes: 7

Related Questions