Center Contents of Bootstrap row container

twitter-bootstrap center
Gregg picture Gregg · Nov 19, 2012 · Viewed 223k times · Source

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>

Answer

Ayo I picture Ayo I · Dec 12, 2017

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.

Related questions

Bootstrap 3 modal vertical position center

This is a two part question: How can you position the modal vertically in the center when you don't know the exact height of the modal? Is it possible to have the modal centered and have overflow:auto in the …

Read More
Center the nav in Twitter Bootstrap

I want to be able to center the nav dead middle of a page and have it stayed centered in different resolutions. I don't want to use offsets to push it over or margin-left as this would just screw it …

Read More
Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple …

Read More