Table in Bootstrap

Table in Bootstrap is working with class table.

Example:

<div>
    <table class="table">
        <caption>Basic Table Layout</caption>
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Dept</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>abc</td>
                <td>xyz</td>
            </tr>
            <tr>
                <td>2</td>
                <td>def</td>
                <td>uvw</td>
            </tr>
            <tr>
                <td>3</td>
                <td>ghi</td>
                <td>qrs</td>
            </tr>
        </tbody>
    </table>
</div>

OUTPUT:

Stripped Table in Bootstrap

To achive Striped in Table in Bootstrap, we just give “table table-striped” class.

Example:

<div>
    <table class="table table-striped">
        <caption>Striped Table Layout</caption>
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Dept</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>abc</td>
                <td>xyz</td>
            </tr>
            <tr>
                <td>2</td>
                <td>def</td>
                <td>uvw</td>
            </tr>
            <tr>
                <td>3</td>
                <td>ghi</td>
                <td>qrs</td>
            </tr>
        </tbody>
    </table>
</div>

OUTPUT:

Border of Table in Bootstrap:

We have to just add “table table-bordered” css class in table tag.

Example:

<div>
    <table class="table table-bordered">
        <caption>Bordered Table Layout</caption>
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Dept</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>abc</td>
                <td>xyz</td>
            </tr>
            <tr>
                <td>2</td>
                <td>def</td>
                <td>uvw</td>
            </tr>
            <tr>
                <td>3</td>
                <td>ghi</td>
                <td>qrs</td>
            </tr>
        </tbody>
    </table>
</div>

OUTPUT:

Hover on Table:

We have to just add ” table table-hover” css class in table tag.

Example:

<div>
    <table class="table table-hover">
        <caption>Hover Table Layout</caption>
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Dept</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>abc</td>
                <td>xyz</td>
            </tr>
            <tr>
                <td>2</td>
                <td>def</td>
                <td>uvw</td>
            </tr>
            <tr>
                <td>3</td>
                <td>ghi</td>
                <td>qrs</td>
            </tr>
        </tbody>
    </table>
</div>

OUTPUT:

Contextual Table Row in Bootstrap:

Example:

<div>
    <table class="table">
        <caption>Contextual Table Layout</caption>
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Dept</th>
            </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td>1</td>
                <td>abc</td>
                <td>xyz</td>
            </tr>
            <tr class="success">
                <td>2</td>
                <td>def</td>
                <td>uvw</td>
            </tr>
            <tr class="warning">
                <td>3</td>
                <td>ghi</td>
                <td>qrs</td>
            </tr>
            <tr class="danger">
                <td>4</td>
                <td>jkl</td>
                <td>nop</td>
            </tr>
        </tbody>
    </table>
</div>

OUTPUT:

Responsive Table in Bootstrap:

To make responsive table, we just have to add “table-responsive” class in Div tag.

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Dept</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>abc</td>
                <td>xyz</td>
            </tr>
            <tr>
                <td>2</td>
                <td>def</td>
                <td>uvw</td>
            </tr>
            <tr>
                <td>3</td>
                <td>ghi</td>
                <td>qrs</td>
            </tr>
        </tbody>
    </table>
</div>

OUTPUT: