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" class, and it uses the full width when I use the "container-fluid class" for the div. I want to horizontally center the table. Can anyone help?

<!-- Container (Pricing Section) --> <div id="pricing" class="container-fluid"> <table class="table table-bordered table-striped"> <thead><tr> <th>Material Name</th> <th>Rate (INR)</th> </tr> </thead> <tbody style=""> <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> <div> 

Here is a screenshot.

I know "container-fluid" uses the full width, but I have also used "container" class only and it does not help. Please advise.

Answer 1

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> 

Answer 2

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>