Bootstrap Center Table On Page | Div | Horizontally

Bootstrap Center Table on Page: This post shows how to center table on page/div in twitter bootstrap. Styling the plain-looking html tables with bootstrap is a breeze. Just add a readily available css class to the table element and you are done! But not everything is going to be easy. It takes a little work in case you want to center table horizontally on a page or in div container.

Even though bootstrap elements are responsive, they don't get center aligned on webpage by default. So we have to explicitly override bootstrap css to center align elements. And here's how we can center table in bootstrap css.

How to Center Table on Page/Div in Bootstrap:

Let's say we have the below bootstrap table.

<div class="container">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Customer-ID</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Pate</td>
                <td>AUSXYZ1481</td>
                <td>johnpate@mydomain.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Gina Ray</td>
                <td>AUSXYZ2932</td>
                <td>ginaray@mydomain.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Paul Smith</td>
                <td>AUSXYZ6381</td>
                <td>paulsmith@mydomain.com</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Darryl Rob</td>
                <td>AUSXYZ7264</td>
                <td>darrylrob@mydomain.com</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Tina Michael</td>
                <td>AUSXYZ8330</td>
                <td>tinamichael@mydomain.com</td>
            </tr>
        </tbody>
    </table>
</div>

And we want to align this table on the center of the page or in div container. For that we have to override .table class of bootstrap. Here's the css code to center table.

<style type="text/css">
.table {
    margin: 0 auto;
    width: 80%;
}
</style>

Now the table will stay aligned center on the page like this,