How do I horizontally center a table in Bootstrap

Question

This my code. What I\'m trying to do is to get this table at the center of the container. But instead, it aligns to the left by default when I use the "container" clas

Answer 1

To horizontally center the table itself, you can use in a CSS, both the margin and width properties.

.table {
   margin: auto;
   width: 50% !important; 
}

Now, for the content of the table, you can use both a combination of CSS and the Bootstrap typography classes. In this case, CSS for the th elements, and the .text-center class in your table.

table th {
   text-align: center; 
}

<table class="table table-bordered table-striped text-center">
    <!-- Content of the table -->
</table>

Here your can see it for both .container-fluid and .container classes:

table th {
   text-align: center; 
}

.table {
   margin: auto;
   width: 50% !important; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- container-fluid -->
<div id="pricing" class="container-fluid">
<table class="table table-bordered table-striped text-center">
   <thead>
       <tr>
          <th>Material Name</th>
          <th>Rate (INR)</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>Books</td>
           <td>7.00(per KG)</td>
       </tr>
       <tr>
           <td>Soft Plastic</td>
           <td>15.00(per KG)</td>
       </tr>
   <tr>
       <td>Hard Plastic</td>
       <td>2.00(per KG)</td>
   </tr>
   </tbody>
</table>
  
<!-- container -->
<div id="pricing" class="container">
<table class="table table-bordered table-striped text-center">
   <thead>
       <tr>
          <th>Material Name</th>
          <th>Rate (INR)</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>Books</td>
           <td>7.00(per KG)</td>
       </tr>
       <tr>
           <td>Soft Plastic</td>
           <td>15.00(per KG)</td>
       </tr>
   <tr>
       <td>Hard Plastic</td>
       <td>2.00(per KG)</td>
   </tr>
   </tbody>
</table>

Answer 2

Just add a class: text-center in table class.

<table class="table text-center"> 
... 
</table>

It's a native class from Bootstrap that permits horizontal align.

Answer 3

<div class="table-responsive">
    <table class="mx-auto w-auto">
      ....
    </table>
</div>

Take solution from Center bootstrap table with 100% width
Comment from @Rene Hamburger: as in the linked answer, w-auto is required for the table to keep its original, natural width. Otherwise it's resized to 100%.

Answer 4

Using this Bootstrap row/column combination works regardless of the size of your table or screen, no CSS necessary:

<div class="row justify-content-center">
    <div class="col-auto">
      <table class="table table-responsive">
        ....table stuff....
      </table>
    </div>
  </div>