Bootstrap Tables

Basic Table

Basic table adds basic styling like padding and only horizontal divider.

Code Structure:

<div class="container">
    <h2>Basic Table</h2>
    <table class="table">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mark</td>
                <td>Anthony</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>Bruno</td>
                <td>Mars</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Katy</td>
                <td>Perry</td>
                <td>USA</td>
            </tr>
        </tbody>
    </table>
</div>

Striped Table

Striped Row table adds zebra stripes to a table

Code Structure:

<div class="container">
    <h2>Striped Table</h2>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mark</td>
                <td>Anthony</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>Bruno</td>
                <td>Mars</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Katy</td>
                <td>Perry</td>
                <td>USA</td>
            </tr>
        </tbody>
    </table>
</div>

Bordered Table

Bordered table adds border to all cells on the table.

Code Structure:

<div class="container">
    <h2>Bordered Table</h2>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mark</td>
                <td>Anthony</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>Bruno</td>
                <td>Mars</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Katy</td>
                <td>Perry</td>
                <td>USA</td>
            </tr>
        </tbody>
    </table>
</div>

Hovered Row Table

Hovered row table adds hover state on rows of the table.

Code Structure:

<div class="container">
    <h2>Hovered Row Table</h2>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mark</td>
                <td>Anthony</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>Bruno</td>
                <td>Mars</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Katy</td>
                <td>Perry</td>
                <td>USA</td>
            </tr>
        </tbody>
    </table>
</div>

Condensed Table

Condensed Table makes table more compact by cutting cell padding in half.

Code Structure:

<div class="container">
    <h2>Condensed Table</h2>
    <table class="table table-condensed">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mark</td>
                <td>Anthony</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>Bruno</td>
                <td>Mars</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Katy</td>
                <td>Perry</td>
                <td>USA</td>
            </tr>
        </tbody>
    </table>
</div>

Contextual Class

Contextual classes are used to color table rows or table cells by using .success, .active, .info, .warning and .danger.

Code Structure:

<div class="container">
    <h2>Contextual Classes</h2>
    <table class="table">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td>Mark</td>
                <td>Anthony</td>
                <td>USA</td>
            </tr>
            <tr class="info">
                <td>Bruno</td>
                <td>Mars</td>
                <td>Canada</td>
            </tr>
            <tr class="warning">
                <td>Katy</td>
                <td>Perry</td>
                <td>USA</td>
            </tr>
        </tbody>
    </table>
</div>

Responsive Table

Responsive Table creates responsive tables which scrolls horizontally on small devices under 768px.

Code Structure:

<div class="container">
    <h2>Responsive Tables</h2>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Address</th>
                    <th>Email Address</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Mark</td>
                    <td>Anthony</td>
                    <td>USA</td>
                    <td>mark@gmail.com</td>
                    <td>50</td>
                </tr>
                <tr>
                    <td>Bruno</td>
                    <td>Mars</td>
                    <td>Canada</td>
                    <td>bruno@gmail.com</td>
                    <td>40</td>
                </tr>
                <tr>
                    <td>Katy</td>
                    <td>Perry</td>
                    <td>USA</td>
                    <td>katy@gmail.com</td>
                    <td>35</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Author : Bibek

Share this

Related Posts