Text-align class for inside a table

Question

Is there a set of classes in Twitter s Bootstrap framework that aligns text   For example  I have some tables with   totals that I want aligned to the right      lt th class  align-right  gt Total lt  th gt    and   lt td class  align-right  gt  1 000 000 00 lt  td gt

User · Accepted Answer

Bootstrap 3 v3 Text Alignment Docs  lt p class  quot text-left quot  gt Left aligned text  lt  p gt   lt p class  quot text-center quot  gt Center aligned text  lt  p gt   lt p class  quot text-right quot  gt Right aligned text  lt  p gt   lt p class  quot text-justify quot  gt Justified text  lt  p gt   lt p class  quot text-nowrap quot  gt No wrap text  lt  p gt    Bootstrap 4 v4 Text Alignment Docs  lt p class  quot text-xs-left quot  gt Left aligned text on all viewport sizes  lt  p gt   lt p class  quot text-xs-center quot  gt Center aligned text on all viewport sizes  lt  p gt   lt p class  quot text-xs-right quot  gt Right aligned text on all viewport sizes  lt  p gt    lt p class  quot text-sm-left quot  gt Left aligned text on viewports sized SM  small  or wider  lt  p gt   lt p class  quot text-md-left quot  gt Left aligned text on viewports sized MD  medium  or wider  lt  p gt   lt p class  quot text-lg-left quot  gt Left aligned text on viewports sized LG  large  or wider  lt  p gt   lt p class  quot text-xl-left quot  gt Left aligned text on viewports sized XL  extra-large  or wider  lt  p gt

User · Answer

I guess because CSS already has text-align right  AFAIK  Bootstrap doesn t have a special class for it   Bootstrap does have  pull-right  for floating divs  etc  to the right   Bootstrap 2 3 just came out and added text alignment styles   Bootstrap 2 3 released  2013-02-07

User · Answer

Bootstrap text alignment in v3 3 5     lt p class  text-left  gt Left lt  p gt    lt p class  text-center  gt Center lt  p gt    lt p class  text-right  gt Right lt  p gt    CodePen example

User · Answer

Just add a  custom  stylesheet which is loaded after Bootstrap  s stylesheet  So the class definitions are overloaded   In this stylesheet declare the alignment as follows    table  text-right  text-align  right   table  text-left  text-align  left   table  text-center  text-align  center    Now you are able to use the  common  alignment conventions for td and th elements

User · Answer

Bootstrap 2 3 has utility classes text-left  text-right  and text-center  but they do not work in table cells  Until Bootstrap 3 0 is released  where they have fixed the issue  and I am able to make the switch  I have added this to my site CSS that is loaded after bootstrap css    text-right       text-align  right  important      text-center       text-align  center  important      text-left       text-align  left  important

User · Answer

Here is a short and sweet answer with an example    x000D   x000D  table  x000D      width  100   x000D    x000D  table td  table th   x000D      border  1px solid  000  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt body gt  x000D     lt table gt  x000D       lt tr gt  x000D         lt th class  text-left  gt Text align left  lt  th gt  x000D         lt th class  text-center  gt Text align center  lt  th gt  x000D         lt th class  text-right  gt Text align right  lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td class  text-left  gt Text align left  lt  td gt  x000D         lt td class  text-center  gt Text align center  lt  td gt  x000D         lt td class  text-right  gt Text align right  lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

The  text-align class is totally valid and more usable than having a  price-label and  price-value which are of no use any more   I recommend going 100  with a custom utility class called   text-right     text-align  right      I like to do some magic  but that is up to you  like something   span pull-right     float  none    text-align  right

User · Answer

Ow  with the release of Bootstrap 3  you can use the classes of text-center for center alignment  text-left for left alignment  text-right for right alignment and text-justify for a justified alignment   Bootstrap is a very simple frontend framework to work with  once you utilize it  As well as being very easy to customize to fit your liking

User · Answer

No  Bootstrap doesn t have a class for that  but this kind of class is considered a  utility  class  similar to the   pull-right  class that  anton mentioned    If you look at utilities less you will see very few utility classes in Bootstrap  the reason being that this kind of class is generally frowned upon  and is recommended to be used for either   a  prototyping and development - so you can quickly build out your pages  then remove the pull-right and pull-left classes in favor of applying floats to more semantic classes or to the elements themselves  or   b  when it s clearly more practical than a more semantic solution    In your case  by your question it looks like you wish to have certain text align on the right in your table  but not all of it  Semantically  it would be better to do something like  I m just going to make up a few classes here  except for the default bootstrap class   table        lt table class  table price-table  gt       lt thead gt         lt th class  price-label  gt Total lt  th gt       lt  thead gt       lt tbody gt         lt tr gt           lt td class  price-value  gt  1 000 000 00 lt  td gt         lt  tr gt       lt  tbody gt     lt  table gt    And just apply the text-align  left or text-align  right declarations to the price-value and price-label classes  or whatever classes work for you     The problem with applying align-right as a class  is that if you want to refactor your tables you will have to redo the markup and the styles  If you use semantic classes you might be able to get away with refactoring only the CSS content  Plus  if are taking the time to apply a class to an element  it s best practice to try to assign semantic value to that class so that the markup is easier to navigate for other programmers  or you three months later    One way to think of it is this  when you pose the question  What is this td for    you will not get clarification from the answer  align-right

User · Answer

Here is the simplest  solution     You can assign the classes like text-center  left or right  The text will align accordingly to these classes  You do not have to make classes separately  These classes are inbuilt in BootStrap 3        lt h1 class  text-center  gt  Heading 1  lt  h1 gt        lt h1 class  text-left  gt  Heading 2  lt  h1 gt        lt h1 class  text-right  gt  Heading 3  lt  h1 gt    Check here   Demo

User · Answer

Use text-align center  important  There may be othertext-align css rules so the  important is important    x000D   x000D  table  x000D  th  x000D  td   x000D    color  black  important  x000D    border-collapse  collapse  x000D    background-color  yellow  important  x000D    border  1px solid black  x000D    padding  10px  x000D    text-align  center  important  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt th gt  x000D        Center aligned text x000D       lt  th gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Center aligned text lt  td gt  x000D       lt td gt Center aligned text lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Bootstrap 4 has five classes for this  text-left  text-center  text-right  text-justify and text-nowrap   x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  rel  stylesheet   gt   lt div class  text-left  gt Left aligned text  lt  div gt   lt div class  text-center  gt Center aligned text  lt  div gt   lt div class  text-right  gt Right aligned text  lt  div gt   lt div class  text-justify  gt Justified text starts here  The quick brown fox jumps over the lazy dog  Justified text ends here  lt  div gt   lt div class  text-nowrap  gt No wrap text starts here  The quick brown fox jumps over the lazy dog  No wrap text ends here  lt  div gt  x000D   x000D   x000D

User · Answer

Using Bootstrap 3 x using text-right works perfectly    lt td class  text-right  gt    text aligned  lt  td gt

User · Answer

In this three class Bootstrap invalid class    text-right        text-align  right       text-center        text-align  center       text-left       text-align  left

User · Answer

In Bootstrap version 4   There some inbuilt classes to position text   For centering table header and data text     lt table gt       lt tr gt         lt th class  text-center  gt Text align center  lt  th gt       lt  tr gt       lt tr gt         lt td class  text-center  gt Text align center  lt  td gt       lt  tr gt     lt  table gt    You can also use this classes to position any text    lt p class  text-left  gt Left aligned text on all viewport sizes  lt  p gt   lt p class  text-center  gt Center aligned text on all viewport sizes  lt  p gt   lt p class  text-right  gt Right aligned text on all viewport sizes  lt  p gt    lt p class  text-sm-left  gt Left aligned text on viewports sized SM  small  or wider  lt  p gt   lt p class  text-md-left  gt Left aligned text on viewports sized MD  medium  or wider  lt  p gt   lt p class  text-lg-left  gt Left aligned text on viewports sized LG  large  or wider  lt  p gt   lt p class  text-xl-left  gt Left aligned text on viewports sized XL  extra-large  or wider lt  p gt    For more details  Hope it s help you

User · Answer

Expanding on David s answer  I just add a simple class to augment Bootstrap like this    money   number       text-align  right  important

User · Answer

lt p class  text-sm-left  gt Left aligned text on viewports sized SM  small  or wider  lt  p gt    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

User · Answer

Bootstrap 4 is coming  The utility classes made familiar in Bootstrap 3 x are now break-point enabled  The default breakpoints are  xs  sm  md  lg and xl  so these text alignment classes look something like  text- breakpoint - alignnment     lt div class  text-sm-left  gt  lt  div gt    or  lt div class  text-md-center  gt  lt  div gt    or  lt div class  text-xl-right  gt  lt  div gt    Important  As of writing this  Bootstrap 4 is only in Alpha 2  These classes and how they re used are subject to change without notice

User · Answer

You can use this CSS below    text-right  text-align  right     For right align     text-left  text-align  left     For left align     text-center  text-align  center     For center align

User · Answer

The following lines of code are working properly  You can assign the classes like text-center  left or right  The text will align accordingly    lt p class  text-center  gt Day 1 lt  p gt    lt p class  text-left  gt Day 2 lt  p gt    lt p class  text-right  gt Day 3 lt  p gt    Here there isn t any need to create any external class  These are the Bootstrap classes and have their own property

User · Answer

If it seems to be not working in Bootstrap 4 5 with text-sm-right take consideration that maybe the content is too much for the table and the table is not at 100  of the container  col for e g    Make the table 100  wide    lt table class  quot w-100 quot  gt

[html] Text-align class for inside a table

Bootstrap 3

Bootstrap 4

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to text-align