Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap table classes

Suggested Video Tutorials
Part 11 - Bootstrap blockquotes and lists
Part 12 - Bootstrap list groups
Part 13 - Bootstrap code blocks



In this video we will discuss styling tables using bootstrap classes.



Bootstrap classes for styling tables
Bootstrap table classes

Contextual classes to color table rows or individual cells
bootstrap table contextual classes

Here is the HTML for the table without any boostrap table classes
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Male</td>
            <td>John@emailDomain.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mary</td>
            <td>Femlae</td>
            <td>mary@emailDomain.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Ben</td>
            <td>Male</td>
            <td>Ben@emailDomain.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Sara</td>
            <td>Female</td>
            <td>sara@emailDomain.com</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Sam</td>
            <td>Male</td>
            <td>sam@emailDomain.com</td>
        </tr>
    </tbody>
</table>

Output : 
bootstrap table example

table class provides light padding and horizontal lines
<table class="table">
    <!--rest of the HTML stays the same-->
</table>

Output : 
bootstrap examples table

table-striped class provides zebra-striping for the table rows
<table class="table table-striped">
    <!--rest of the HTML stays the same-->
</table>

Output : 
bootstrap table striped example

table-bordered class provide borders on all sides of the table and cells.
<table class="table table-striped table-bordered">
    <!--rest of the HTML stays the same-->
</table>

Output : 
bootstrap table with border

table-hover class provides highlighting of rows on hover
<table class="table table-bordered table-hover">
    <!--rest of the HTML stays the same-->
</table>

table-condensed class makes table more compact by cutting cell padding in half
<table class="table table-bordered table-hover table-condensed">
    <!--rest of the HTML stays the same-->
</table>

Output : 
bootstrap condensed table

To make a table responsive, place the table inside a <div> element, and apply table-responsive class on the <div> element. This will provide a horizontal scrollbar when the screen size is less than 768px (i.e on a small device). On a screen size larger than 768px you will not find any difference. Applying the table-responsive class directly on the table will not do anything useful.

<div class="table-responsive">
    <table class="table table-bordered table-hover">
        <!--rest of the HTML stays the same-->
    </table>
</div>

Output :
bootstrap responsive table example

Use the bootstrap contextual classes to colour the table rows
<div class="table-responsive">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td>1</td>
                <td>John</td>
                <td>Male</td>
                <td>John@emailDomain.com</td>
            </tr>
            <tr class="danger">
                <td>2</td>
                <td>Mary</td>
                <td>Femlae</td>
                <td>mary@emailDomain.com</td>
            </tr>
            <tr class="info">
                <td>3</td>
                <td>Ben</td>
                <td>Male</td>
                <td>Ben@emailDomain.com</td>
            </tr>
            <tr class="success">
                <td>4</td>
                <td>Sara</td>
                <td>Female</td>
                <td>sara@emailDomain.com</td>
            </tr>
            <tr class="warning">
                <td>5</td>
                <td>Sam</td>
                <td>Male</td>
                <td>sam@emailDomain.com</td>
            </tr>
        </tbody>
    </table>
</div>

Output : 
bootstrap table contextual classes example

bootstrap tutorial for beginners

1 comment:

  1. Hi Venkat,

    Your video tutorial was so good to learn.
    Hence, I request you to upload Angular JS 2.0 tutorial.

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.