Bootstrap table Responsive Images and Alert Message with example

Bootstrap Table

You can create bootstrap table responsive to all screen sizes using table classes.

.table    It provides basic table styling.

<table class="table ">

    <thead>

        <tr>

        <th>Student Name</th>

        <th>Roll No</th>

        <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

        <td>John</td>

        <td>Wicks</td>

        <td>[email protected]</td>

        </tr>

        <tr>

        <td>Mary</td>

        <td>Moe</td>

        <td>[email protected]</td>

        </tr>

    </tbody>

</table>

Output

To add more table styling, add another calss with table class 

Striped Table

.table-striped class is used to changes the background color of all odd rows of the table so that it looks like zebra stripes.

Table Bordered

.table-bordered class adds border to all sides of the table and cells

Table Hover

.table-hover adds a mouse hover effect on table rows

Table Condensed

.table-condensed class reduces the cell padding to half and makes the table more compact

You can add multiple table classes at once. In below table, we add table-border, table-striped and table-hove together.

<table class="table table-bordered table-striped table-hover"></table>

Contextual Classes

Contextual classes can be applied to table rows or cells to change the background color.

• .active
• .success
• .warning
• .danger
• .info

<table class="table">

    <thead>

        <tr>

            <th>Student Name</th>

            <th>Roll No</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr class="active">

            <td>John</td>

            <td>Wicks</td>

            <td>[email protected]</td>

        </tr>

        <tr class="success">

            <td>Mary</td>

            <td>Moe</td>

            <td>[email protected]</td>

        </tr>

        <tr class="info">

            <td>Smith</td>

            <td>Dooley</td>

            <td>[email protected]</td>

        </tr>

        <tr class="warning">

            <td>Warn</td>

            <td>Refs</td>

            <td>[email protected]</td>

        </tr>

        <tr class="danger">

            <td>July</td>

            <td>Deo</td>

            <td>[email protected]</td>

        </tr>

    </tbody>

</table>

Output

Bootstrap Images

.img-rounded         It changes the image corner rounded
.img-circle             It changes image shape to a circle
.img-thumbnail      It changes the image shape to a thumbnail
.img-responsive     It makes the bootstrap image responsive such that the image adjusts its size according to its parent.

<img src="nature.jpg" class="img-circle" /> 

<img src="nature.jpg" class="img-thumbnail" />

<img src="nature.jpg" class="img-rounded" />

Output

Image Gallery

You can create photo gallery using a grid system and img-thumbnail class.

Bootstrap Wells

.well    It adds a rounded border around the Html element with padding and gray background.
.well-sm adds a small well.
.well-lg adds a large well.

<div class="well">Normal Well</div>

<div class="well well-sm">Small Well</div>

<div class="well well-lg">Large Well</div>

Bootstrap Alert Message

Bootstrap provides four contextual classes to create alert messages.
.alert class is used to create alerts. Then use any one contextual class from following

.alert-success
.alert-info
.alert-warning
.alert-danger

<div class="alert alert-success">

    <strong>Success!</strong> Successful Message

</div>

<div class="alert alert-info">

    <strong>Info!</strong> Info Message

</div>

<div class="alert alert-warning">

    <strong>Warning!</strong> Warning Message

</div>

<div class="alert alert-danger">

    <strong>Danger!</strong> Dangerous Message

</div>

Output

Alert Links

To create a link inside alert message, use class .alert-link with Html anchor tag.

<div class="alert alert-success">

    <strong>Success!</strong>

    <a href="#" class="alert-link"> Click to read it</a>.

</div>

<div class="alert alert-info">

    <strong>Info!</strong>

    <a href="#" class="alert-link"> Click to read it</a>.

</div>

<div class="alert alert-warning">

    <strong>Warning!</strong>

    <a href="#" class="alert-link"> Click to read it</a>.

</div>

<div class="alert alert-danger">

    <strong>Danger!</strong>

    <a href="#" class="alert-link"> Click to read it</a>.

</div>

Output

Alert Closing

To add "X" close sign at the right of the alert message, follow the below steps

• Add .alert-dismissible class with alert message container

• Add .close class with anchor tag inside alert message.

• Add data-dismiss="alert" in the anchor tag

<div class="alert alert-success alert-dismissible">

    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

    <strong>Success!</strong>  A successful message

</div>

<div class="alert alert-warning alert-dismissible">

    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

    <strong>Warning!</strong> A warning message

</div>

Output

Animated Alerts

To add animation while closing the alert message, you have to add two classes with alert message container

.fade
.in

<div class="alert alert-success alert-dismissible fade in">

    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

    <strong>Success!</strong>  A successful message

</div>