twitter bootstrap - Contenidos del centro del contenedor de la fila Bootstrap
tooltip bootstrap css (4)
Tengo el código a continuación y me gustaría centrar los elementos de "pozo" de la "fila" externa div. He intentado varios enfoques, como text-align: center (que solo centra el texto y no los elementos DIV internos).
Aquí hay un jsfiddle . La idea es que aparezca una página de "bien" azulejos y que después de 4 o más se ajusta. Pero si es menos de 4, deberían aparecer centrados en la página.
<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>
Con Bootstrap 4, hay una clase css específicamente para esto. A continuación se centrará el contenido de la fila:
<div class="row justify-content-center">
...inner divs and content...
</div>
Consulte: https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment , para obtener más información.
Intenta esto, funciona!
<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>
Luego, en css, defina el ancho del centro div y centre en un documento:
.center {
margin: 0 auto;
width: 80%;
}
Para Bootstrap 4, use el siguiente código:
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Ref: https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering
Resolví esto haciendo lo siguiente:
<body class="container-fluid">
<div class="row">
<div class="span6" style="float: none; margin: 0 auto;">
....
</div>
</div>
</body>