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.
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 .
Add . d-flex . justify-content-center classes to the parent element of the column (it should be . row element ) to center it horizontally.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With