How do I horizontally center a table in Bootstrap

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> <table> <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> <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.

7 Answers

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

<div> <div> <table> ....table stuff.... </table> </div> </div> 

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> <!-- 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=""></script> <script src=""></script> <link href="" rel="stylesheet"/> <!-- container-fluid --> <div> <table> <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> <table> <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>

<div> <table> .... </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%.

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

<table> ... </table> 

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

You can center the table as follows with CSS.

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

You need to have margin: auto

You can try column classes make it center

<div><!-- you can use column classes md-3,md-5 as per your table width --> <table> <!-- table content --> </table> </div> 

With css

.table td { text-align: center; } 

Or bootstrap:

<table>