Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 541
Cheesus Toast Avatar asked Jul 04 '16 04:07

Cheesus Toast


People also ask

How do I center COL in a Bootstrap row?

Use d-flex justify-content-center on your column div. This will center everything inside that column. If you have text and image inside the column, you need to use d-flex justify-content-center and text-center .

How do I center all columns in a row in Bootstrap?

Add . d-flex . justify-content-center classes to the parent element of the column (it should be . row element ) to center it horizontally.

How do I show 3 divs in a row?

Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side.


1 Answers

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/

like image 180
Nadeem Manzoor Avatar answered Oct 16 '22 19:10

Nadeem Manzoor