How to place table text into center using Bootstrap?

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    




My Personal Notes arrow_drop_up

Budding Web DeveloperKeen learnerAverage CoderDancer&Social Activist

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.