Hola,
Tengo una web con este grid en Bootstrap: (es un panel, que contiene una fila de 3 columnas y las quiero centrar)
<div class="panel-body"> <div class="panel2"> <div class="row"> <div class="col-md-6"> <div class="col-md-5"><span class="text">aaaa1</span></div> <div class="col-md-2"><span class="text">10</span></div> <div class="col-md-5 text-right"> <span>Gestionados 0</span> <span>No Gestionados 10</span> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="col-md-5"><span class="text">aaaa2</span></div> <div class="col-md-2"><span class="text">20</span></div> <div class="col-md-5 text-right"> <span>Gestionados 0</span> <span>No Gestionados 20</span> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="col-md-5"><span class="text">aaaa3</span></div> <div class="col-md-2"><span class="text">10</span></div> <div class="col-md-5 text-right"> <span>Gestionados 0</span> <span>No Gestionados 20</span> </div> </div> </div> </div> </div>
Quiero centrar el contenido de la clase panel2, que son tres columnas, pero no lo consigo. He probado con center-block y nada y también con una clase propia que he llamado centered, pero no lo consigo. ¿Qué código css introduzco en la clase panel2, con margin: 0 auto, tampoco sale?
¿Alguna sugerencia, por favor?
Muchas gracias,
Respuestas
La estructura que muestras tiene tres filas cuyos contenidos solo ocupan la mitad de su anchura. Como una fila Bootstrap estándar tiene 12 columnas y tu solo ocupas 6, para centrar los contenidos puedes usar el truco de dejar tres columnas libres a cada lado de los contenidos. Así tendrás: 3 columnas libres + 6 columnas de contenidos + 3 columnas libres = 12 columnas.
Para ello, cambia este elemento de cada fila:
<div class="col-md-6">
Por este otro:
<div class="col-md-6 col-md-offset-3">
Más información sobre cómo desplazar columnas con Bootstrap.
@javiereguiluz