How to place table text into center using Bootstrap? - GeeksforGeeks

05 Aug, 2020
Tables allow us to aggregate a huge amount of data and present it in a clear and orderly way. A basic Bootstrap table has a light padding and only horizontal dividers. The base class is  .table to any table,and after adding it we can extend with custom styles or our various included modifier classes to our table for the design purpose.
Placing the table text into the center using Bootstrap: By default,  the text in <td> elements are always regular and left-aligned.
We have to basically deal with the <td> elements.
There can be two ways:
By adding text-align: center;  in our CSS code for the tds.By adding the “ text-center” class of Bootstrap 3 to a td element also works out of the box.
By adding text-align: center;  in our CSS code for the tds.
By adding the “ text-center” class of Bootstrap 3 to a td element also works out of the box.
By adding text-align:center in CSS codeThe text-align property specifies the horizontal alignment of text in an element. So in our CSS code, we simply set the text-align property of our tds as the center, and the table text gets placed into the center..table td {
text-align: center;
} 
Example:<!DOCTYPE html><html><head><title>Page Title</title><style>  table, th, td {  border: 1px solid black;  border-collapse: collapse;    }/* setting the text-align property to center*/ td {  padding: 5px;  text-align:center;        }</style></head><body><table style="width:100%">  <tr>    <th>Name</th>    <th colspan="2">Contact Numbers</th>  </tr>  <tr>    <td >Pawan Kumar</td>    <td>1234567890</td>    <td>0987654321</td>  </tr></table>  </body>  </html>
The text-align property specifies the horizontal alignment of text in an element. So in our CSS code, we simply set the text-align property of our tds as the center, and the table text gets placed into the center.
.table td {
text-align: center;
} 

Example:
<!DOCTYPE html><html><head><title>Page Title</title><style>  table, th, td {  border: 1px solid black;  border-collapse: collapse;    }/* setting the text-align property to center*/ td {  padding: 5px;  text-align:center;        }</style></head><body><table style="width:100%">  <tr>    <th>Name</th>    <th colspan="2">Contact Numbers</th>  </tr>  <tr>    <td >Pawan Kumar</td>    <td>1234567890</td>    <td>0987654321</td>  </tr></table>  </body>  </html>
By adding the ” text-center” class of Bootstrap 3We can use the “text-center” class of bootstrap 3 for the center-alignment of an element. So in our td when we add “text-center” class, and then our table text goes to the center.<td class="text-center">.......</td>
Example :<!DOCTYPE html><html><head><title>Page Title</title><!-- Latest compiled and minified CSS --><link rel="stylesheet"       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"      crossorigin="anonymous">  <!-- Optional theme --><link rel="stylesheet"      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"      integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"       crossorigin="anonymous">  <!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><style>table, th, td {  border: 1px solid black;  border-collapse: collapse;    }</style></head><body><table style="width:100%">  <tr>    <th >Name</th>    <th colspan="2">Contact Numbers</th>  </tr>  <tr>    <td class="text-center">Pawan Kumar</td>    <td class="text-center">1234567890</td>    <td class="text-center">0987654321</td>  </tr></table>  </body>  </html>
We can use the “text-center” class of bootstrap 3 for the center-alignment of an element. So in our td when we add “text-center” class, and then our table text goes to the center.
<td class="text-center">.......</td>

Example :
<!DOCTYPE html><html><head><title>Page Title</title><!-- Latest compiled and minified CSS --><link rel="stylesheet"       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"      crossorigin="anonymous">  <!-- Optional theme --><link rel="stylesheet"      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"      integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"       crossorigin="anonymous">  <!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><style>table, th, td {  border: 1px solid black;  border-collapse: collapse;    }</style></head><body><table style="width:100%">  <tr>    <th >Name</th>    <th colspan="2">Contact Numbers</th>  </tr>  <tr>    <td class="text-center">Pawan Kumar</td>    <td class="text-center">1234567890</td>    <td class="text-center">0987654321</td>  </tr></table>  </body>  </html>
Bootstrap-Misc
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?