Encabezado central de Bootstrap

93

Es mi primera experiencia de Twitter Bootstrap. He agregado algunos encabezados (h1, h2, etc.) y están alineados por el lado izquierdo. ¿Cuál es la forma correcta de centrar los títulos?

twitter-bootstrap

— SiberianGuy
fuente

¿Cómo contiene los títulos? ¿Dentro de un contenedor, como una petiqueta, o suelto?

— Andres Ilich

@AndresIlich, dentro de row-fluide (que está dentro de container-fluide)

— SiberianGuy

¿Está buscando centrar todos los títulos? o solo unos pocos seleccionados?

— Andres Ilich

@AndresIlich, quiero tener todos los encabezados centrados de forma predeterminada

— SiberianGuy

141

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

bootstrap ha agregado tres clases css para alinear texto.

— Jinpu Hu
fuente

69

simplemente use class = 'text-center' en el elemento para el encabezado central.

<h2 class="text-center">sample center heading</h2>

use class = 'text-left' en el elemento para el encabezado izquierdo, y use class = 'text-right' en el elemento para el encabezado derecho.

— Sadegh-khan
fuente

29

Simplemente use "justify-content-center" en el atributo de clase de la fila.

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>

— Jufrench
fuente

2

¿Por qué toda esta complejidad? ¿No <h1 class="text-center">es más simple, según la respuesta de Sadegh-khan ?

— Marco Sulla

El uso de esto permite que el encabezado se centralice en el div cuando se usa bootstrap, lo que no se hizo con text-center. Hace que el encabezado aparezca en el medio de la pantalla, que era lo que buscaba.

— a.norman

11

Según sus comentarios, para centrar todos los encabezados, todo lo que tiene que hacer es agregarlos text-align:centera todos al mismo tiempo, así:

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }

— Andrés Ilich
fuente

1

Si bien es cierto, la idea detrás del uso de twitter bootstrap es usar las clases existentes en la medida de lo posible. Vea la respuesta de Jinpu Hu

— Skurpi

Los marcos de @Skurpi funcionan como sugerencias sobre lo que puede utilizar en un proyecto; De ninguna manera son un hecho. Si bien es más sencillo usar las clases y los estilos ya dados en el bootstrap, si los requisitos de su proyecto "requieren" que realice algunos cambios drásticos en el marco, según la pregunta de OP, la forma más sencilla de hacerlo es simplemente modificar esos cambios en el nivel de la raíz. A diferencia de agregar una tonelada de clases que realmente no necesitas.

— Andres Ilich

@Skurpi Además, esas clases de alineación no existían en el momento de escribir este artículo. Esta respuesta tiene un año.

— Andrés Ilich

Ilich Tienes razón, no

— miré

5

Bootstrap viene con muchas clases precompiladas y una de ellas es class="text-left". Llame a esta clase cuando sea necesario. :-)

— Tinsae
fuente