CODEWITHSUNDEEP
htmltwitter-bootstrap
Amod Gaikwad
Amod Gaikwad

Reputation: 471

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

Upvotes: 47

Views: 203342

Answers (8)

Shub
Shub

Reputation: 535

Use mx-auto to horizontally center the table...

<div class='col-5 mx-auto'>
    <table class='table'>
        ...   
    </table>
</div>


<!DOCTYPE html>

<head>
  <link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet'>
</head>

<body>
  <div class='col-5 mx-auto'>
    <table class='table'>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>30</td>
          <td>USA</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>25</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Mark Johnson</td>
          <td>35</td>
          <td>UK</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>

Upvotes: 0

Grigory Kislin
Grigory Kislin

Reputation: 18000

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

Upvotes: 20

Kat
Kat

Reputation: 1564

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>

Upvotes: 91

Du-Lacoste
Du-Lacoste

Reputation: 12767

You can center the table as follows with CSS. 

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

You need to have margin: auto

Upvotes: 3

Ravi
Ravi

Reputation: 1330

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>

Upvotes: 1

Luiz Gon&#231;alves
Luiz Gon&#231;alves

Reputation: 547

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.

Upvotes: 6

cristiancajiaos
cristiancajiaos

Reputation: 966

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>

Upvotes: 28

Hearner
Hearner

Reputation: 2729

With css

.table td {
   text-align: center;   
}

https://jsfiddle.net/8s9918my/

Or bootstrap: 

<table class="table text-center">

Upvotes: -1

Related Questions