how can I centered text in bootstrap table?

Question

In this table how can I align the text in center? text-center is not working.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
  <tbody>
    <tr>
      <td>name</td>
      <td>supplier </td>
      <td><button>Delete</button> </td>
    </tr>
  </tbody>
</table>

Please post a minimal reproducible example so we can see the exact problem. Your example here doesn't even attempt to use `text-center`. We don't know specifically what you are trying to center. — mykaf, May 09 '22 at 20:45

score 1 · Answer 1 · answered May 09 '22 at 20:56

You have to apply the Bootstrap-class: text-center to every single td not the the table! Alternativly you could consider creating a custom css with td { text-align: center; } which will be shorter and easier then applying the bvootstrap-class to every single td.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
  <tbody>
    <tr>
      <td class="text-center">name</td>
      <td class="text-center">supplier </td>
      <td class="text-center"><button>Delete</button> </td>
    </tr>
  </tbody>
</table>

Samuel Barón Abad · Answer 2 · 2022-05-10T06:52:14.890

You can use the classname text-center.

<div class="text-center">
  I am centered
</div>

    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>

    <body>
    <div class="container text-center">           
      <table class="table table-striped">
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>
    </div>
    </body>

Or in CSS put this in the parent container

display: flex;
align-items: center;

your answer is not helpful or compareble. As the OP said, he already tried `text-center` as a class. It was not working. Proberly because he applied it to the table instead of every single `td`. posting stuffs about div's is not helpful as it does not solve the issue. Your last class also does not put the text of a table cell in the center. it would just center a table within a flex-container. So your solution miss the actual question. Last but not least, working [repro] would greatly improve and validate your answer — tacoshy, May 09 '22 at 21:01
If you see my first answer, the class is in a div container that wraps the table, that's correct. The third option is wrong, I agree because it centers the table with respect to the parent container. — Samuel Barón Abad, May 10 '22 at 06:45

Pinal Sukhadiya · Answer 3 · 2022-05-10T11:21:31.230

1

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped table-bordered table-dark table-hover ">
    <tbody align="center">
        <tr>
            <td>name</td>
            <td>supplier </td>
            <td><button>Delete</button> </td>
        </tr>
    </tbody>
</table>

add align="center" to the tbody

edited May 10 '22 at 11:21

answered May 10 '22 at 07:02

Pinal Sukhadiya

241
1
5

score -1 · Answer 4 · answered May 09 '22 at 20:42

-1

use css classes, go checkout centertag - w3schools

.class{text-align:center;}



<tbody>
          <tr>
          <td class="center">name</td>
          <td class="center">supplier </td>
            <td><button class="center">Delete</button> </td>
           
          </tr>
         
        </tbody>`

answered May 09 '22 at 20:42

Gijzy

102
9

1

this question is specifically labled and titled as bootstrap question. The whole reason to use a framework is not to require coding it through custom CSS. This answer can easily be answered with using bootstrap. – tacoshy May 09 '22 at 20:47
PS: `` has been deprecated in HTML5 or is obsolete. It should not be used anymore outside of HTML4 email templates. As such ti should also not been recommended. Last but not least it would be easier to just add `td { text-align: center; }` in your custom css then creating a class and adding it to every single td. If you add it to every single td then you could use the correct bootstrap class in the first place. – tacoshy May 09 '22 at 20:58

how can I centered text in bootstrap table?

4 Answers4