Can't seem to center columns (bootstrap)

Question

Ive looked at a few of the popular answers on stackoverflow but it's not working for me. I want to center text and a table in the middle of the page. Ideally it should work in a bootstrap column that doesn't equal 12 because I want to add another column next to it in the future and I want them both to be centered.

.col-centered{
    float: none;
    margin: 0 auto;
}

<div class = 'container-fluid'>
  <div class = 'quiz-list'>
  <div class = 'row'>
    <div class = 'col-md-4 col-centered'>
      
      This text should be centered and the table underneath should be centered as well
       
      <table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
    </div>
    
  </div>  
  </div>
  
</div>

That's what I have so far. It's not doing any centering. I tried another solution using inline block and text align center but that one centered the table differently than it centered the text, which I don't want. Any ideas?

Answer 1

You can manage like this add margin 0 auto for table.

.col-centered{
    float: none;
    text-align:center;

}

.col-centered table{
  margin:0 auto;
}

<div class = 'container-fluid'>
  <div class = 'quiz-list'>
  <div class = 'row'>
    <div class = 'col-md-4 col-centered'>
      
      This text should be centered and the table underneath should be centered as well
       
      <table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
    </div>
    
  </div>  
  </div>
  
</div>

Answer 2

So, By default, the text will be aligned to left in twitter bootstrap. So, to make it center, add this css

.col-centered {
  float: none;
  margin: 0 auto;
  text-align: center;
}
.table th {
   text-align: center;   
}

Here is the jsFiddle

Hope it helps you :)