Geek Answers Handbook

Center dynamic number of col div inside a string in Bootstrap

I would like to center the dynamic number of col elements per line in bootstrap. I tried to find a way to do this with Bootstrap, but it seems to be completely missing.

How people who use bootstrap will know - colossi go to the far left. You can put a dynamic number of col elements in a line - you do not need to add it to 12 (so please do not suggest this to happen). This is important if you are going to massage the list of elements dynamically. You can have as many or more columns in a row as you want.

All I want to do is make sure that - regardless of the number of elements in the row - they are sitting in the center of the window. They will all be something like this: 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 may be 1, 2, 3 or as many as you like. I do not know, because there will be so many elements that are in the list paged by the server. In any case, I need this whole line, no matter how many panels are concentrated in it.

I know that I could program divs using server-side code in the view, but that would be quite complicated. There must be some way to achieve this in Bootstrap! I just didn’t find it. I read a huge number of SO answers, but none of them relate to what I want to do. I don’t know why this doesn’t allow you to just put the line in the center - it’s very frustrating.

.

+4
1

css.

.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/

+5

More articles:


All Articles