How To Place Table Text Into Center Using Bootstrap

Posted By Bajarangi soft , Posted On 08-10-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.

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.
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 CSS code
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:1

<!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>
<br>
<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.
Example:2

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