Menu
I have the code below and I'd like to center the "well" elements of the outer "row" div. I've tried various approaches such as text-align: center (which just centers the text and not the inner DIV elements.
Here is a jsfiddle. The idea is that I get a page of "well" tiles and that after 4 or so it wraps. But if it is less than 4, they should appear centered on the page.
<body class="container-fluid"> <div class="row"> <div class="well span2"> <div class="row"> <div class="span2"> Header </div> </div> <div class="row"> <div class="span2"> Sub Header </div> </div> </div> <div class="well span2"> <div class="row"> <div class="span2"> Header </div> </div> <div class="row"> <div class="span2"> Sub Header </div> </div> </div> </div> </body> 
954
Just add the class . text-center to the parent element of the text to center content horizontally.
Additionally, you need to define the parent container as a flex container. You can do this by setting the display property to “flex.” Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
With Bootstrap 4, there is a css class specifically for this. The below will center row content:
<div class="row justify-content-center"> ...inner divs and content... </div> See: https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment, for more information.
160
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
