I’m trying to center a col-span-6 div to the center of the page using Twitter Bootstrap 3. Unfortunately, nothing I do is working. I used Firefox developer tools to discern the issue was most likely stemming from the fact that the col-span-6 class was floated left. Therefore, I added a style=”float: none !important;” to the col-span-6 element, but that did nothing.
Help!!
<div class="panel-group col-sm-6" style="float: none;">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
4
Answers
You can align a div to center of the page using the CSS. Following CSS works for me. You can try using this CSS.
You can use
display: flex
for this to handle alignment in a easier way. I have done a sample code below. Hope it helps youHTML
CSS
JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/bhgx3yzv/
I’m not sure but it seems to me that you wanted to achieve this effect:
It was enough to add to your div’s:
margin: 0 auto;
Use column offset with “col-sm-6” to make it in center. Here is an example:
It automatically push the column in center.