Open In App

How to place table text into center using Bootstrap?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

  1. By adding text-align: center;  in our CSS code for the tds.
  2. 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:

HTML




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


Output:

  • By adding the ” text-center” class of Bootstrap 3

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 :

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href=
        integrity=
"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src=
        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>


Output:



Last Updated : 19 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads