Halloween Costume ideas 2015

A News portal by Websoft IT Nepal Pvt. ltd.

PLEASE BOOKMARK US BY PRESS CTRL+D बूक्मार्क गर्न CTRL+D थिच्नुहोस् 

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">
                <td>John Pate</td>
                <td>Gina Ray</td>
                <td>Paul Smith</td>
                <td>Darryl Rob</td>
                <td>Tina Michael</td>
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%;
Now the table will stay aligned center on the page like this,


Post a Comment



Contact Form


Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget