Comment aligner le texte à gauche et à droite dans une div dans bootstrap

La disposition des éléments de la demande est appelée alignement. Il aide à créer un design soigné et les empêche d'être un désordre désordonné. Bootstrap fournit de nombreuses classes prédéfinies qui sont utilisées à cet effet. Ces cours incluent «tire-gauche","tracture à droite","flotteur", et beaucoup plus.

Cet article expliquera comment définir l'alignement droit et gauche du texte dans un «» en bootstrap.

Comment aligner le texte à droite et à gauche dans une div à l'aide de bootstrap?

Plusieurs façons sont utilisées pour ajuster l'alignement du texte dans un

récipient. Cependant, nous discuterons des éléments suivants:

• Méthode 1: Définissez l'alignement gauche et droit en utilisant «tire-gauche" et "tracture à droite" Classe
• Méthode 2: Définissez l'alignement droit et gauche à l'aide du «Flotter à droite" et "flotteur" Des classes
• Méthode 3: Alignement gauche et droit à l'aide du «justifier-contenu entre les deux" Classe

Méthode 1: Réglez le texte d'alignement gauche et droit à l'aide de la classe «Pull-Left» et «Pull-droite»

Dans Bootstrap 3, le «tracture à droite" et "tire-gauche«Les classes sont utilisées pour définir l'alignement du texte sur les côtés droite et gauche, respectivement.

L'exemple ci-dessous montre la démonstration pratique des classes ci-dessus:

Tout d'abord, ajoutez un "" avec le "file d'atteinte" et "bg-info" Des classes.

À l'intérieur du conteneur créé, ajoutez deux autres "»Tags contenant du contenu. Le premier se voit attribuer la classe «Pull-Left», et l'autre se voit attribuer la classe «pull-droite».

Html

Coût
30 $

Ici:

• "file d'atteinte«La classe est utilisée pour effacer le contenu flottant. Sans ça, la disposition serait brisée.
• "tire-gauche"La classe aligne le texte sur le côté gauche.
• "tracture à droite"La classe aligne le texte sur le côté droit.

On peut observer que le texte «Coût»Est aligné de gauche tandis que la valeur en dollars pertinente est alignée à droite:

Méthode 2: Définissez le texte d'alignement droit et gauche à l'aide des classes «Float-droite» et «Float-Left»

Dans Bootstrap 4, le «flotteur" et "Flotter à droite«Les classes sont utilisées pour aligner les éléments à gauche et à droite. Pour les utiliser, nous allons d'abord:

• Ajoutez un élément «» et attribuez-le "bg" et "file d'atteinte" Des classes.
• À l'intérieur, ajoutez deux autres éléments «» contenant du texte.
• Spécifie le "flotteur”Classe au premier conteneur qui flottera le texte vers la gauche.
• Attribuez le «Flotter à droite"Au" "qui flottera le texte vers la droite.

Voici le code HTML:

Scores
500

Sortir

Méthode 3: Alignez le texte gauche et droit à l'aide de la classe «Justify-Content-between»

Dans Bootstrap 4, le «justifier-contenu entre les deux»La classe distribue un espace égal entre les éléments flexibles.

L'exemple ci-dessous montre une classe «» ayant «bg-info","d-flex", et "justifier-contenu entre les deux" Des classes:

Coût total
50 $

Sortir

En utilisant ces classes bootstrap, le texte dans le conteneur «» est à droite et à gauche.

Conseil bonus
Si vous souhaitez aligner tous les éléments flexibles à gauche, utilisez le bootstrap "justifier-contenu«Classe, et si les éléments flexibles doivent être alignés correctement, utilisez le«justifier" classe.

Conclusion

À droite et à gauche aligner le texte dans un élément «», plusieurs classes sont utilisées. Dans Bootstrap 3, le «tire-gauche" et "tracture à droite«Les cours sont utilisés. Dans Bootstrap 4, le «flotteur" et "Flotter à droite»Les classes peuvent être utilisées. Les éléments flexibles sont alignés en utilisant le «justifier-contenu entre les deux" classe. Cet article a expliqué comment régler l'alignement gauche et droit du texte dans un conteneur «» en bootstrap.