[twitter-bootstrap] Center Contents of Bootstrap row container

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>

This question is related to twitter-bootstrap center

The answer is


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.


For Bootstrap 4, use the below code:

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Ref: https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering


Try this, it works!

<div class="row">
    <div class="center">
        <div class="col-xs-12 col-sm-4">
            <p>hi 1!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 2!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 3!</p>
        </div>
    </div>
</div>

Then, in css define the width of center div and center in a document:

.center {
    margin: 0 auto;
    width: 80%;
}