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" clas

Answer 1

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; 
}

Here your can see it for both .container-fluid and .container classes:

table th {
   text-align: center; 
}

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

   

       

          
Material Name
          
Rate (INR)
       
   
   

       

           
Books
           
7.00(per KG)
       
       

           
Soft Plastic
           
15.00(per KG)
       
   

       
Hard Plastic
       
2.00(per KG)
   
   

  



   

       

          
Material Name
          
Rate (INR)
       
   
   

       

           
Books
           
7.00(per KG)
       
       

           
Soft Plastic
           
15.00(per KG)
       
   

       
Hard Plastic
       
2.00(per KG)