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,

Also Read: How to Insert Form into Bootstrap Popover

Don't Miss: How to Change Button Color in Bootstrap

That explains about centering table on page in bootstrap css. Please note that setting margin: 0 auto; alone will center the table element so apply table width only if you have to. Otherwise table will span to the entire width of the page/container by default.

Tweet