En-tête central Bootstrap

89

C'est ma première expérience Twitter Bootstrap. J'ai ajouté quelques titres (h1, h2, etc.) et ils sont alignés à gauche. Quelle est la bonne façon de centrer les titres?

twitter-bootstrap SibérienGuy
la source
Comment contenez-vous les titres? À l'intérieur d'un conteneur, comme une pétiquette ou en vrac?
Andres Ilich
@AndresIlich, à l'intérieur de row-fluide (qui est à l'intérieur de container-fluide)
SiberianGuy
cherchez-vous à centrer toutes les rubriques? ou juste quelques-uns?
Andres Ilich
@AndresIlich, je veux que tous les titres soient centrés par défaut
SiberianGuy

Réponses:

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

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

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

bootstrap a ajouté trois classes css pour l'alignement du texte.

Jinpu Hu
la source
67

utilisez simplement class = 'text-center' dans l'élément pour l'en-tête central.

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

utilisez class = 'text-left' dans l'élément pour l'en-tête gauche et utilisez class = 'text-right' dans l'élément pour l'en-tête droit.

Sadegh-khan
la source
27

Utilisez simplement "justify-content-center" dans l'attribut de classe de la ligne.

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>
Jufrench
la source
2
Pourquoi toute cette complexité? N'est-ce pas <h1 class="text-center">simplement plus simple, selon la réponse du Sadegh-khan ?
Marco Sulla
Son utilisation permet à l'en-tête de se centraliser dans le div lors de l'utilisation de bootstrap, ce qui n'a pas été le cas avec text-center. Cela fait apparaître l'en-tête au milieu de l'écran, ce que je visais.
un
11

Selon vos commentaires, pour centrer tous les titres, tout ce que vous avez à faire est de les ajouter text-align:centertous en même temps, comme ceci:

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }
Andres Ilich
la source
Bien que cela soit vrai, l'idée derrière l'utilisation du bootstrap de Twitter est d'utiliser les classes existantes autant que possible. Voir la réponse de Jinpu Hu
Skurpi
Les cadres @Skurpi fonctionnent comme des suggestions sur ce que vous pouvez utiliser dans un projet; Ils ne sont en aucun cas acquis. Bien qu'il soit plus simple d'utiliser les classes et les styles déjà donnés dans le bootstrap, si les exigences de votre projet "exigent" que vous apportiez des changements drastiques au framework, selon la question de l'OP, que la façon la plus simple de procéder est de simplement modifier ces changements à le niveau racine. Au lieu d'ajouter une tonne de classes dont vous n'avez vraiment pas besoin.
Andres Ilich
@Skurpi De plus, ces classes d'alignement n'existaient pas au moment de la rédaction. Cette réponse date d'un an.
Andres Ilich
Ilich Vous avez raison, n'a pas regardé la date de cette question quand je suis arrivé ici
Skurpi
5

Bootstrap est livré avec de nombreuses classes pré-build et l'une d'entre elles est class="text-left". Veuillez appeler cette classe chaque fois que nécessaire. :-)

Tinsae
la source