Loading tray: with two centers

Question

I am trying to create a two-line layout using Bootstrap 3.1. I read this: How can I center a Bootstrap div with the class 'spanX'? but the contents are aligned to the left. Here is my HTML:

<div class="row"> <div class="center"> <div class="col-lg-3 gauche"> Left div </div> <div class="col-lg-5 corps"> Right div </div> </div> </div> 

And my CSS:

 body { padding: 0; margin: 0; } .corps { background-color: white; } .contenu { margin-top: 5em; margin-bottom: 1em; background-color: white; padding: 1.2em; padding-left: 1.5em; } .center { float: none; margin-left: auto; margin-right: auto; } .gauche { background-color: #e6e6e6; min-height: 200px; } 

The result is here: http://i.imgur.com/5nhZ2WS.png

Answer 1

Add a container, remove the center div and add two empty col-lg-2 on each side so that it adds up to 12 columns:

 <div class="container"> <div class="row"> <div class="col-lg-2"> </div> <div class="col-lg-3 gauche"> Left div </div> <div class="col-lg-5 corps"> Right div </div> <div class="col-lg-2"> </div> </div> </div> 

Answer 2

You would like to use the column offset class. If you use the Bootstrap assembly, all column classes must add up to 12. Only col-lg-offset-2 8 can be added to your col-lg-3 and col-lg-5 , so adding col-lg-offset-2 should fix you to the center. In addition, bootstrap has a built-in container centering class that I personally would use. See below code:

 <div class="container"> <div class="row"> <div class="col-lg-3 col-lg-offset-2 gauche"> Left div </div> <div class="col-lg-5 corps"> Right div </div> </div> </div> 

Answer 3

Try

 .row { margin:0px auto; }