Center Contents of Bootstrap row container

center, twitter-bootstrap

Solution

I solved this by doing the following:

<body class="container-fluid">
    <div class="row">
        <div class="span6" style="float: none; margin: 0 auto;">
           ....
        </div>
    </div>
</body>

Problem

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> ```

Original source