how can I centered text in bootstrap table?-CodePudding

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<table >
  <tbody>
    <tr>
      <td>name</td>
      <td>supplier </td>
      <td><button>Delete</button> </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<table >
  <tbody>
    <tr>
      <td >name</td>
      <td >supplier </td>
      <td ><button>Delete</button> </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

<table >
    <tbody align="center">
        <tr>
            <td>name</td>
            <td>supplier </td>
            <td><button>Delete</button> </td>
        </tr>
    </tbody>
</table>

just add attribute to the tbody align="center"

CodePudding user response：

use css classes, go checkout centertag - w3schools

.class{text-align:center;}



<tbody>
          <tr>
          <td >name</td>
          <td >supplier </td>
            <td><button >Delete</button> </td>
           
          </tr>
         
        </tbody>`

CodePudding user response：

You can use the classname text-center.

<div >
  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 >           
      <table >
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>[email protected]</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
          </tr>
        </tbody>
      </table>
    </div>
    </body>

Or in CSS put this in the parent container

display: flex;
align-items: center;