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...

<th class="align-right">Total</th>

and

<td class="align-right">$1,000,000.00</td>

Ramsey

Answer 1

Bootstrap 3

v3 Text Alignment Docs

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

---

Bootstrap 4

v4 Text Alignment Docs

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

---

Bootstrap 5

v5 Text Alignment Docs

text-left has been replaced with text-start, text-right has been replaced with text-end

<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Encrust

This does not work for table cells unfortunately. It may simply be a CSS order issue. See this issue [github.com/twitter/bootstrap/issues/6837]. Should be fixed in version 3.0. – Bench

Atm I do <td><div class='text-center'>bootin</div></td> to get around this. – Encrust

I wish bootstrap used the breakpoints with this class like: text-right-md for aligning text to the right only for medium up. – Kaitlynkaitlynn

<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p> – Linked

It's weird that I tried using text-md-right (and xs & lg) but they wouldn't work. I was in Codepen so that may have something to do with it. Anyways, this answer worked for me. Thanks! – Morelos

This is not an accurate answer relative to the question... Bootstrap 4 examples don't apply to a table. The question is about tables.. – Peba

The link is broken – Mattos

Answer for bootstrap 4 is not accurate. There's no xs breakpoint in bootstrap 4 grid system. – Embosser

Answer 2

Using Bootstrap 3.x using text-right works perfectly:

<td class="text-right">
  text aligned
</td>

Irmine

You can also apply this to the entire row, as well: <tr class="text-right"> <td>text aligned</td> </tr> – May

Also for Bootstrap 4 – Dolley

Answer 3

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):

  <table class="table price-table">
    <thead>
      <th class="price-label">Total</th>
    </thead>
    <tbody>
      <tr>
        <td class="price-value">$1,000,000.00</td>
      </tr>
    </tbody>
  </table>

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".

Homoeo

and by the way, I'm sure you can do better with the class names than what I chose. but that wasn't the emphasis – Homoeo

They didn't at the time, and IMO still shouldn't. – Homoeo

Answer 4

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;
}

Bench

Answer 5

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.

Vick

Answer 6

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)

Geniality

Yeah I didn't want to use inline styles on each element. I know about pull-right but I didn't want the elements floating. I might just add a class if there is none :) – Ramsey

Answer 7

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].

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

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.

Charron

This caught me off guard while reading Bootstrap 3 docs on a Bootstrap 4 installation. Thanks for the reminder! – Portraitist

Answer 8

Bootstrap text alignment in v3.3.5:

 <p class="text-left">Left</p>
 <p class="text-center">Center</p>
 <p class="text-right">Right</p>

CodePen example

Polysyllable

Answer 9

The following lines of code are working properly. You can assign the classes like text-center, left or right, The text will align accordingly.

<p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

Here there isn't any need to create any external class. These are the Bootstrap classes and have their own property.

Irrigation

Answer 10

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 */

Prognostic

Answer 11

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;
}

Corrianne

Yeah, every class is totally "valid", but it's not semantic. You should use utility classes sparingly in production code, they're meant for "bootstrapping". – Homoeo

Because w3 says that´s the proper way to use clases doesn´t mean it´s the best. jQuery UI and Bootstrap wouldn´t exist if wasn´t because of 'non-semantic' classes. People tend to use semantic meaning for clases until they realize that going for the generic is way better in all aspects. It´s hard to get it at first or think that it´s actually good, I walked that road... – Corrianne

jQuery UI is a bad example, because it's a javascript library that also includes CSS, and Bootstrap, as I pointed out, uses utility classes as UTILITIES. Have you ever thought about why Bootstrap is called Bootstrap? So that you can use these classes for development and change them in your production code. And I didn't say not to use them at all, I use pull-left, pull-right quite a bit. And I also use text-center sometimes. But I use them sparingly, and I don't as a first course of action recommend that others use them over better, more semantic options. – Homoeo

jQuery UI was just an example. The approach I´m talking about is what make libraries work. We can see kendo, blueprint, grid, 960, Chico UI, and even Bootstrap itself do this. It´s the only way this libraries can exist/work. You can take a look at major companies how they are using css like Apple (images.apple.com/v/imac/a/styles/imac.css) and you will be impressed. That´s account for productivity and a huge matter. Must be honest, I was amazed I found NO tutorial explaining this. I think the term bootstrap it´s because it´s something you have to start off, not to change off later. – Corrianne

Answer 12

Here is a short and sweet answer with an example.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>

Agnola

Are the HTML tags link and script valid outside the head or body tags? Why not provide a complete and valid HTML document example? – Ancestry

Answer 13

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.

Bonfire

Answer 14

Expanding on David's answer, I just add a simple class to augment Bootstrap like this:

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

Chaisson

Answer 15

Bootstrap 4 has five classes for this: text-left, text-center, text-right, text-justify and text-nowrap.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-left">Left aligned text.</div>
<div class="text-center">Center aligned text.</div>
<div class="text-right">Right aligned text.</div>
<div class="text-justify">Justified text starts here. The quick brown fox jumps over the lazy dog. Justified text ends here.</div>
<div class="text-nowrap">No wrap text starts here. The quick brown fox jumps over the lazy dog. No wrap text ends here.</div>

Reddin

Answer 16

Bootstrap 5

v5 text alignment docs

In Bootstrap version 5, text alignment utility classes are changed. Use following new classes to align text:

• text-left text-start for left alignment.
• text-center for center alignment.
• text-right text-end for right alignment.

This classes can be used within tables as well. To right align text within a cell

    <td class="text-end">$1,000.00</td>

If you want to right align text within whole column, you can use css nth-child property

/* || right aligns text of third column; change 3 to your desired column number*/
tr > th:nth-child(3),
tr > td:nth-child(3) {
    text-align: right;
}

Refer below example for complete solution

/* to right align text within whole column */
.custom-table tr>th:nth-child(3),
.custom-table tr>td:nth-child(3) {
  text-align: right;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<body>
  <table class="table table-bordered custom-table">
    <thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Customer</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>11 May 2021</td>
        <td>Paula Allen</td>
        <td>$104.98</td>
      </tr>
      <tr>
        <td>10 May 2021</td>
        <td class="text-end">Kevin(right-align)</td>
        <td>$233.00</td>
      </tr>
      <tr>
        <td>09 May 2021</td>
        <td>Joyes Murray</td>
        <td>$170.25</td>
      </tr>
    </tbody>
  </table>
</body>

Canzonet

Answer 17

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

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

Check here: Demo

Trivet

Answer 18

In Bootstrap version 4. There some inbuilt classes to position text.

For centering table header and data text:

 <table>
    <tr>
      <th class="text-center">Text align center.</th>
    </tr>
    <tr>
      <td class="text-center">Text align center.</td>
    </tr>
  </table>

You can also use this classes to position any text.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider</p>

For more details

Fairspoken

Answer 19

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

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.

Haematothermal

Answer 20

Use text-align:center !important. There may be othertext-align css rules so the !important is important.

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}

<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>

Mattos

Answer 21

In this three class Bootstrap invalid class

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

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

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

Cask

There are already several high quality answers to this question, most of which were posted three years ago when the question was asked. While it may be a worthwhile exercise to attempt to answer simple questions such as this one in order to further your programming abilities, posting this answer in its current state does not add anything to the question. If there is something novel about your answer, please take a couple sentences to explain how it's different and why that makes it better. – Paraselene

What do you mean by "In this three class Bootstrap invalid class"? Can you elaborate? In particular, for "invalid class". – Ancestry

Answer 22

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:

 <table class="w-100">

Trackless