Bootstrap 3

v3 Documents d’alignement de texte

 
Left aligned text.
 
Center aligned text.
 
Right aligned text.
 
Justified text.
 
No wrap text. 

Bootstrap 4

v4 Documents d’alignement de texte

 
Left aligned text on all viewport sizes.
 
Center aligned text on all viewport sizes.
 
Right aligned text on all viewport sizes.
 
Left aligned text on viewports sized SM (small) or wider.
 
Left aligned text on viewports sized MD (medium) or wider.
 
Left aligned text on viewports sized LG (large) or wider.
 
Left aligned text on viewports sized XL (extra-large) or wider. 

Utiliser Bootstrap 3.x en utilisant text-right fonctionne parfaitement:

  text aligned  

Non, Bootstrap n’a pas de classe pour cela, mais ce type de classe est considéré comme une classe “utilitaire”, similaire à la classe “.pull-right” mentionnée par @anton.

Si vous regardez utilities.less, vous verrez très peu de classes d’utilitaires dans Bootstrap, la raison étant que ce type de classe est généralement mal vu, et qu’il est recommandé de l’utiliser pour: a) le prototypage et le développement – sortez vos pages, puis supprimez les classes pull-right et pull-left en faveur de l’application de floats à d’autres classes sémantiques ou aux éléments eux-mêmes, ou b) lorsqu’il est clairement plus pratique qu’une solution plus sémantique.

Dans votre cas, par votre question, il semble que vous souhaitiez que certains textes soient alignés à droite dans votre tableau, mais pas tous. Sémantiquement, il serait préférable de faire quelque chose comme ça (je vais juste créer quelques classes ici, sauf la classe bootstrap par défaut, .table):

  
 
 
Total
 
 
 
 
$1,000,000.00
 
 
  

Et appliquez simplement les déclarations text-align: left ou text-align: right aux classes price-value et price-label (ou aux classes qui vous conviennent).

Le problème avec l’application align-right tant que classe est que si vous voulez refactoriser vos tables, vous devrez refaire le balisage et les styles. Si vous utilisez des classes sémantiques, vous pourrez peut-être vous contenter de refactoriser uniquement les CSS. De plus, si vous prenez le temps d’appliquer une classe à un élément, il est recommandé d’essayer d’atsortingbuer une valeur sémantique à cette classe afin que le balisage soit plus facile à naviguer pour les autres programmeurs (ou vous trois mois plus tard).

Une façon d’y penser est la suivante: lorsque vous posez la question “Qu’est-ce que c’est que ce td?”, Vous n’obtiendrez aucune précision de la part de la réponse “align-right”.

Bootstrap 2.3 a des classes utilitaires text-left, text-right et text-center, mais elles ne fonctionnent pas dans les cellules de tableau. Jusqu’à ce que bootstrap 3.0 soit publié (où ils ont corrigé le problème) et que je puisse faire le changement, je l’ai ajouté à mon site CSS chargé après bootstrap.css:

 .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-left { text-align: left !important; } 

Ajoutez simplement une feuille de style “personnalisée” chargée après la feuille de style Bootstrap. Les définitions de classe sont donc surchargées.

Dans cette feuille de style, déclarez l’alignement comme suit:

 .table .text-right {text-align: right} .table .text-left {text-align: left} .table .text-center {text-align: center} 

Vous pouvez maintenant utiliser les conventions d’alignement “communes” pour les éléments td et th.

Je suppose que css a déjà text-align:right AFAIK bootstrap n’a pas de classe spéciale pour cela.

Bootstrap a “pull-right” pour les divs flottants etc à droite.

UPDATE bootstrap 2.3 vient de sortir et a ajouté des styles d’alignement de texte

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/

Bootstrap 4 arrive ! Les classes d’utilitaires rendues familières dans Bootstrap 3.x sont désormais activées pour les points d’arrêt. Les points d’arrêt par défaut sont: xs , sm , md , lg et xl , donc ces classes d’alignement de texte ressemblent à .text-[breakpoint]-[alignnment] .

 
 //or 
 //or 
 

Important: En écrivant ceci, Bootstrap 4 est seulement en Alpha 2. Ces classes et leur utilisation sont sujettes à modification sans préavis.

Alignement du texte d’amorce dans la version 3.3.5.

  
Left
 
Center
 
Right 

Exemple CodePen

Cette ligne de code fonctionne correctement. Vous pouvez affecter les classes comme le centre de texte, à gauche ou à droite. Le texte s’alignera en conséquence.

 
 Day 1 
 
 Day 2 
 
 Day 3  

Ici, pas besoin de créer une classe externe, ce sont les classes bootstrap et ont leur propre propriété.

Vous pouvez utiliser ce css ci-dessous:

 .text-right {text-align: right} /*For right align*/ .text-left {text-align: left} /*For left align*/ .text-center {text-align: center} /*For center align*/ 

.text-align classe .text-align est totalement valable et plus utilisable que d’avoir un .price-label et .price-value qui ne sont plus utiles.

Je recommande d’aller à 100% avec une classe utilitaire personnalisée appelée

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

J’aime faire de la magie, mais ça dépend de vous:

 span.pull-right { float:none; text-align:right; } 

Avec la sortie de bootstrap 3, vous pouvez utiliser les classes de text-center de text-center pour l’alignement du centre, le text-left pour l’alignement à gauche, le text-right pour l’alignement à droite et le text-justify pour un alignement justifié.

Bootstrap est un framework très simple à utiliser, une fois que vous l’utilisez. En plus d’être très personnalisé pour s’adapter à votre goût.

En développant la réponse de David, j’ajoute une classe simple pour augmenter Bootstrap comme ceci:

 .money, .number { text-align: right !important; } 

Voici une réponse courte et douce avec exemple.

 table{width: 100%;} table td, table th{border: 1px solid #000;} 

     
 
 
Text align left.
 
Text align center.
 
Text align right.
 
 
 
Text align left.
 
Text align center.
 
Text align right.
 
 
  

Nous avons cinq classes pour cela, que vous pouvez consulter ici: http://v4-alpha.getbootstrap.com/components/utilities/

 
Left aligned text.
 
Center aligned text.
 
Right aligned text.
 
Justified text.
 
No wrap text. 

Voici la solution la plus simple

Vous pouvez affecter les classes comme le centre de texte, à gauche ou à droite. Le texte s’alignera en conséquence sur ces classes. Vous n’êtes pas obligé de créer des classes séparément. Ces classes sont intégrées dans BootStrap 3

  
 Heading 1 
 
 Heading 2 
 
 Heading 3  

Vérifiez ici: Démo

 
Left aligned text on viewports sized SM (small) or wider. 

Texte aligné à gauche sur les fenêtres de taille MD (moyenne) ou plus large.

Texte aligné à gauche sur les fenêtres de taille LG (grande) ou plus large.

Texte aligné à gauche sur les fenêtres de taille XL (extra large) ou plus large.

Dans cette classe invalide de trois classes bootstrap

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

Si vous utilisez Bootstrap 3.x

 
Left aligned text.
 
Center aligned text.
 
Right aligned text.
 
Justified text.
 
No wrap text. 

OU si vous utilisez Bootstrap 4

 
Left aligned text on all viewport sizes.
 
Center aligned text on all viewport sizes.
 
Right aligned text on all viewport sizes.
 
Left aligned text on viewports sized SM (small) or wider.
 
Left aligned text on viewports sized MD (medium) or wider.
 
Left aligned text on viewports sized LG (large) or wider.
 
Left aligned text on viewports sized XL (extra-large) or wider. 

Les classes d’utilitaires Boostrap 4 se sont familiarisées avec Bootstrap 3.x. La différence est maintenant possible. Les points d’arrêt par défaut sont: xs, sm, md, lg and xl, donc ces classes d’alignement de texte ressemblent à .text- [point d’arrêt] – [alignnment]