How to Horizontally Center Align Table Text Using Bootstrap

In this tutorial, learn how to horizontally center align table text with Bootstrap. The short answer is: use .text-center CSS class in Bootstrap to center align the text of each cell of a table.

You can center align the head cell of a table or all another cell of the table. You can use either Bootstrap classes or you can use the CSS text properties.

Horizontally Center Align Table Text of Cell Using Bootstrap

To centrally align the text of the table using Bootstrap. You have to just add the CSS class .text-center to any cell of a table. Add the class to the head cell of td cell of a table which you want to center align.

With the above Bootstrap class, you can use other Bootstrap text-align classes for alignment of content.

Test it Live

Output

Cricketer NameTeam NameScore
Shikhar DhawanIndia87

The above contains the first row with th cell and second row with td cell. The second row has the last cell with text in the middle using Bootstrap class.

Make Table Head Cell Text Centrally Aligned Using CSS

To make text center position of head cell of the table, you have to use the below CSS. It add the text-align:center property to all the head cell of a table.

Test it Live

Output

Cricketer NameTeam NameScore
Shikhar DhawanIndia87
Yuvraj SinghIndia97

The above example contains the head cell with all the text centrally aligned. If you want to centrally align the td cell, you have to read further.

How to Align Table Text of All td Cell Centrally Using CSS

In addition to aligning the text of the head cell of a table. You can make the text of td cell of a table centrally aligned using CSS. To centerally align the text of TD cell, you have to use the below CSS with CSS property text-align:center.

Test it Live

Output

Cricketer NameTeam NameScore
Shikhar DhawanIndia87
Yuvraj SinghIndia97
Shikhar DhawanIndia87

The above example make all the td cell of a table centrally aligned.

I hope, you like this tutorial of how to center align the text of a table cell using Boostrap. If you have any query regarding the tutorial, please comment below.

References

Also tell me, which method you are using to make text center align for a table cell.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.