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.

Screenshot

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

score 83 · Answer 1 · answered Jan 19 '19 at 19:37

83

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>

answered Jan 19 '19 at 19:37

Kat

1,444
9
13

4

This is for bootstrap 4. – ngelx Apr 01 '19 at 13:33
1

I think you'd have to make sure the table width does not exceed the screen width, as it will remain centered, with no scrollbar. Either that or I'm doing something wrong. – Herbert Van-Vliet Aug 26 '20 at 08:15
col-md-4, col-md-6 etc can be applied according to table size. – JWC May Jan 06 '21 at 07:21

score 27 · Answer 2 · answered Jul 02 '16 at 15:29

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>

It is a poor man's solution to get into the CSS and add some code. The reason why stylesheets such as bootstrap are so complete is precisely to avoid hacking the css. — JG Estiot, Nov 14 '19 at 03:00
Biggest withdrawal with this solution is the width of the table, what if we don't want it to be only 50%? Kat provided a great answer now compatible with latest bootstrap 4. — Armin, Nov 27 '19 at 12:35

Grigory Kislin · Answer 3 · 2020-06-19T23:10:02.153

18

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

edited Jun 19 '20 at 23:10

answered Jun 19 '19 at 20:30

Grigory Kislin

16,647
10
125
197

score 7 · Answer 4 · answered Jul 04 '16 at 13:46

7

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.

answered Jul 04 '16 at 13:46

Luiz Gonçalves

549
3
11

score 4 · Answer 5 · edited Nov 07 '17 at 12:42

4

You can center the table as follows with CSS.

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

You need to have margin: auto

edited Nov 07 '17 at 12:42

mseo

3,881
3
22
26

answered Oct 11 '17 at 12:04

Du-Lacoste

11,530
2
71
51

There is no need to add css. Hacking the css should be the last option but unfortunately for some it is the first reflex. The reason why large stylesheet frameworks like bootstrap were created is precisely to provide a full solution that does not require coding css except for cosmetic stuff like colors. – JG Estiot Nov 14 '19 at 03:06

Ravi · Answer 6 · 2017-01-13T05:45:16.887

1

You can try column classes make it center

<div class="row col-md-4 col-md-push-4"><!-- you can use column classes md-3,md-5 as per your table width -->
<table class="yourtableclasses">
<!-- table content -->
</table>
</div>

edited Jan 13 '17 at 05:45

answered Jan 13 '17 at 05:39

Ravi

1,312
10
18

Hearner · Answer 7 · 2016-07-02T14:04:50.357

0

With css

.table td {
   text-align: center;   
}

https://jsfiddle.net/8s9918my/

Or bootstrap:

<table class="table text-center">

edited Jul 02 '16 at 14:04

answered Jul 02 '16 at 13:58

Hearner

2,711
3
17
34

2

This doesn't seem to be working for me. The table is still on the left. – Giacomo Mar 08 '17 at 14:29

How do I horizontally center a table in Bootstrap

7 Answers7

Linked