Comment aligner la droite dans Bootstrap

Lors du développement d'une application, il est essentiel de considérer l'alignement et la position appropriés des composants. Cette approche aide les développeurs à rendre l'application plus professionnelle. L'alignement fait référence à la disposition des articles. Plus précisément, dans Bootstrap, plusieurs classes peuvent être utilisées pour ajuster l'alignement de l'élément, comme «texte à droite","Flotter à droite", et beaucoup plus.

Cet article vous enseignera la façon de s'aligner directement dans Bootstrap.

Comment aligner la droite dans Bootstrap?

Il existe plusieurs façons d'aligner les articles à droite dans Bootstrap. Certains d'entre eux sont énumérés ci-dessous:

• • Classe de flottaison
  • justifier
  • align-items-end
  • s'aligner
  • ML-AUTO
  • texte à droite

Méthode 1: Comment aligner la droite dans Bootstrap en utilisant la classe «Float-droite»?

En bootstrap, le «Flotter à droite"La classe a positionné l'élément sur le côté droit.

Exemple

Dans cet exemple, nous utiliserons le «Flotter à droite«Classe dans l'élément« »:

Utilisation de la classe Float-droite

Sortir

Méthode 2: Comment aligner la droite dans Bootstrap en utilisant la classe «Justify-Content-End»?

La classe bootstrap "justifier"Est utilisé avec des articles flexibles. Alors le "d-flex"La classe est également ajoutée à l'élément" ":

Utilisation de la fin de justifier

Sortir

Méthode 3: Comment aligner la droite dans Bootstrap en utilisant la classe «Align-Items-End»?

Le "align-items-end«Est la classe d'utilité du«align-items". Ces classes sont utilisées pour ajuster les alignements des éléments flexibles. Ainsi, la classe D-FLEX rend l'affichage de l'élément flexion. Ensuite, à l'intérieur de ce conteneur «», ajoutez deux autres éléments:

Objet 1

Sortir

Méthode 4: Comment aligner la droite dans Bootstrap en utilisant la classe «Align-Self-End»?

Le "s'aligner"La classe est utilisée pour définir l'alignement des éléments uniques à droite.

Exemple

Comprenons à l'aide de l'exemple ci-dessous:

• • Ajouter un "”Element et attribuez-le le"d-flex" et "colonne de flexion" Des classes.
  • À l'intérieur de l'élément «», spécifiez trois sous-contraineurs.
  • Attribuez le «s'aligner«Classe au deuxième élément« »:

ligne 1

Sortir

Méthode 5: Comment aligner la droite dans Bootstrap en utilisant la classe «ML-Auto»?

Le "ML-AUTO"La classe ajoute de l'espace de marge à la gauche de l'élément. Pour l'utiliser:

• • Spécifie le "«Élément avec la classe« d-flex ».
  • Ensuite, créez un bouton en utilisant le "btn","BTN-Outline-primaire", et "ML-AUTO" Des classes:

bouton ML-Auto

Sortir

Méthode 6: Comment aligner la droite dans Bootstrap en utilisant la classe «Text-droite»?

Le "texte à droite"La classe aligne le texte sur le côté droit. Dans l'exemple ci-dessous, ajoutez un "

”Élément et attribuez-le un"texte à droite" classe:

Ce texte est correctement aligné.

Sortir

Il s'agissait de définir le bon alignement dans Bootstrap.

Conclusion

Plusieurs classes en bootstrap sont utilisées pour définir le bon alignement de texte, comme «Flotter à droite","justifier","align-items-end","s'aligner","ML-AUTO", et "texte à droite". Cependant, certaines classes fonctionnent sur les éléments avec affichage "fléchir". Ce message a illustré comment s'aligner directement dans Bootstrap en utilisant plusieurs méthodes.