Bootstrap Headers:

Email Panel with Bootstrap Tabs

Having an email panel in your website allows both you and your team to access all the data and content from a project and save it in a single location where it can also be viewed and accessed by the members of your website. In other words, the email panel features different tabs where different information such as logs, letters, and emails are stored to be viewed later. This can be used in a number of ways. You can use this in the profile page so the users are always aware of the latest events. It can also be a way by which the users can communicate to each other.

Here we have a Bootstrap tab for emails. This simple email panel features three different tabs for letter, emails, and logs. It offers a great organization option and will make sure you have more space in the page. Normally, once you get a certain amount of emails, your page starts to get messy but with the help of this Bootstrap navigation bar email panel, you can categorize the emails to take up less physical space. The list itself also features a good amount of detail such as the title, date and time, quantity, and venue. All in all, our Bootstrap email tabs are perfect for displaying the mailbox section of your website.

Bootstrap Navigation Bar

Bootstrap Email Tabs

Email Panel

Bootstrap Tabs for Email

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="col-md-12">
        <div class="panel panel-default panel-fade">
            <div class="panel-heading">
                <span class="panel-title">
                    <div class="pull-left">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#letters" data-toggle="tab"><i class="glyphicon glyphicon-print"></i> letters</a>
                            </li>
                            <li>
                                <a href="#emails" data-toggle="tab"><i class="glyphicon glyphicon-send"></i> emails</a>
                            </li>
                            <li>
                                <a href="#loglist" data-toggle="tab"><i class="glyphicon glyphicon-list"></i> logs</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group pull-right">
                        <div class="btn-group">
                            <a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-cog"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">action 1</a></li>
                                <li><a href="#">action 2</a></li>
                                <li class="divider"></li>
                                <li><a href="#">another action</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </span>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="letters">
                        <h3>letters</h3>
                        <form action="" method="post">
                            <input type="hidden" name="formname" value="printletters" />
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>print</th>
                                        <th style="text-align: left;">subscription</th>
                                        <th style="text-align: left;">venue</th>
                                        <th>date/time</th>
                                        <th>quantity</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (winter)</td>
                                        <td>downtown theater</td>
                                        <td>1/1/2021 10:00 pm</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (spring)</td>
                                        <td>downtown theater</td>
                                        <td>1/1/2021 10:00 pm</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (summer)</td>
                                        <td>downtown theater</td>
                                        <td>1/1/2021 10:00 pm</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (fall)</td>
                                        <td>downtown theater</td>
                                        <td>1/1/2021 10:00 pm</td>
                                        <td>8</td>
                                    </tr>
                                </tbody>
                            </table>
                            select events and click below<br />
                            <br />
                            <input type="submit" class="btn btn-outline btn-default" value="submit" />
                        </form>
                    </div>
                    <div class="tab-pane fade" id="emails">
                        <h3>emails</h3>
                        <form action="" method="post">
                            <input type="hidden" name="formname" value="printletters" />
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>print</th>
                                        <th style="text-align: left;">subscription</th>
                                        <th style="text-align: left;">venue</th>
                                        <th>date/time</th>
                                        <th>quantity</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (spring)</td>
                                        <td>downtown theater</td>
                                        <td>1/2/2021 11:00 pm</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (winter)</td>
                                        <td>downtown theater</td>
                                        <td>1/2/2021 11:00 pm</td>
                                        <td>6</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (fall)</td>
                                        <td>downtown theater</td>
                                        <td>1/2/2021 11:00 pm</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (summer)</td>
                                        <td>downtown theater</td>
                                        <td>1/2/2021 11:00 pm</td>
                                        <td>7</td>
                                    </tr>
                                </tbody>
                            </table>
                            select events and click below<br />
                            <br />
                            <input type="submit" class="btn btn-outline btn-default" value="submit" />
                        </form>
                    </div>
                    <div class="tab-pane fade" id="loglist">
                        <h3>logs</h3>
                        <form action="" method="post">
                            <input type="hidden" name="formname" value="printletters" />
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>print</th>
                                        <th style="text-align: left;">subscription</th>
                                        <th style="text-align: left;">venue</th>
                                        <th>date/time</th>
                                        <th>quantity</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (fall)</td>
                                        <td>downtown theater</td>
                                        <td>1/3/2021 12:00 pm</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (spring)</td>
                                        <td>downtown theater</td>
                                        <td>1/3/2021 12:00 pm</td>
                                        <td>3</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (summer)</td>
                                        <td>downtown theater</td>
                                        <td>1/3/2021 12:00 pm</td>
                                        <td>6</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (winter)</td>
                                        <td>downtown theater</td>
                                        <td>1/3/2021 12:00 pm</td>
                                        <td>5</td>
                                    </tr>
                                </tbody>
                            </table>
                            select events and click below<br />
                            <br />
                            <input type="submit" class="btn btn-outline btn-default" value="submit" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

a.btn,
a.btn:active,
a.btn:focus,
button.btn:active,
button.btn:focus,
button.btn:active,
button.btn:focus,
.dropdown-menu li a,
.dropdown-menu li a:active,
.dropdown-menu li a:focus,
.dropdown-menu li a:hover,
ul.dropdown-menu li a,
ul.dropdown-menu li a:active,
ul.dropdown-menu li a:focus,
ul.dropdown-menu li a:hover,
.nav-tabs li a,
.nav-tabs li a:active,
.nav-tabs li a:focus {
    outline: 0px !important;
    -webkit-appearance: none;
    text-decoration: none;
}
/* panel */
.panel {
    margin-top: 25px;
}
.panel .panel-heading {
    padding: 5px 5px 0 5px;
}
.panel .nav-tabs {
    border-bottom: none;
}
/* inactive tabs */
.nav > li > a {
    background-color: #f5f5f5;
    color: #676767;
    border-color: #dddddd;
    border-width: 1px;
    padding: 5px 15px;
    line-height: 2;
    -webkit-transition: all 0.75s;
    -moz-transition: all 0.75s;
    transition: all 0.75s;
}
.nav > li > a:active {
    background-color: #f5f5f5;
    color: #676767;
}
.nav > li > a:focus {
    background-color: #f5f5f5;
    color: #676767;
}
.nav > li > a:hover {
    background-color: #eeeeee;
    color: #676767;
    border-color: #dddddd;
}

/* active tabs */
.nav > li.active > a:hover {
    color: #222222;
}
/* table */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th {
    background-color: #000000;
    color: #ffffff;
    border-bottom: 1px solid #f3f3f3;
    border-top: 1px solid #f3f3f3 !important;
    line-height: 1.42857;
    padding: 8px;
    vertical-align: top;
}
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: 0px solid blue;
    line-height: 1.42857;
    padding: 8px;
    vertical-align: top;
    background-color: #f3f3f3;
}
.table-striped > tbody > tr:nth-child(2n + 1) > td {
    background-color: #ffffff;
}
/* buttons */
.btn-default.btn-outline:active,
.btn-default.btn-outline:focus,
.btn-default.btn-outline {
    color: #676767;
    border-color: #676767;
    background-color: transparent;
    border-width: 2px;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s;
}
.btn-default.btn-outline:hover {
    color: #000000;
    border-color: #000000;
    background-color: transparent;
    border-width: 2px;
    -webkit-transition: all 0.75s;
    -moz-transition: all 0.75s;
    transition: all 0.75s;
}
/* panel buttons */
.btn-group button.btn.btn-outline.btn-default {
    background-color: #f5f5f5;
    color: #676767;
    border-color: #dddddd;
    border-width: 1px;
    padding: 5px 15px;
    line-height: 2;
    -webkit-transition: all 0.75s;
    -moz-transition: all 0.75s;
    transition: all 0.75s;
}
.btn-group button.btn.btn-outline.btn-default:focus {
    background-color: #f5f5f5;
}
.btn-group button.btn.btn-outline.btn-default:active {
    background-color: #f5f5f5;
}
.btn-group button.btn.btn-outline.btn-default:hover {
    background-color: #eeeeee;
    border-width: 1px;
    -webkit-transition: all 0.75s;
    -moz-transition: all 0.75s;
    transition: all 0.75s;
}
.btn-outline.btn-highlight {
    color: #676767;
    border-color: #676767;
    background-color: transparent;
    border-width: 2px;
}
.display-title {
    font-family: verdana, arial, helvetica;
    color: #008400;
}
ul.nav.nav-tabs li.btn-group.active > a.btn.btn-default {
    border: 1px solid #dddddd;
    background-color: #ffffff;
    border-right: 0px;
    margin-right: 0px;
    border-bottom: 0px;
}
ul.nav.nav-tabs li.btn-group > a.btn.btn-default {
    border: 1px solid #f5f5f5;
    border-right: 0px;
    margin-right: 0px;
    border-bottom: 0px;
}
ul.nav.nav-tabs > li.btn-group.active > a.btn.dropdown-toggle {
    border: 1px solid #dddddd;
    background-color: #ffffff;
    margin-left: 0px;
    border-left: 0px;
    border-bottom: 0px;
}
ul.nav.nav-tabs > li.btn-group > a.btn.dropdown-toggle {
    border: 1px solid #f5f5f5;
    margin-left: 0px;
    border-left: 0px;
    border-bottom: 0px;
}
ul.nav.nav-tabs li.btn-group a.btn.dropdown-toggle span.caret {
    color: #f5f5f5;
}
ul.nav.nav-tabs li.btn-group.active > a.btn.dropdown-toggle > span.caret {
    color: #999999;
}

$("a.btn.btn-default").hover(function (e) {
    $("a.btn.dropdown-toggle").trigger(e.type);
});
$(".display-fade").delay(25).animate({ opacity: "1" }, 800);
$(".table-fade").delay(25).animate({ opacity: "1" }, 800);
var def = "black";
function showNotification(color) {
    $("#notification").removeClass(def);
    $("#notification").addClass(color);
    def = color;
    $("#notification").fadeIn("slow");
    //alert('hi');
    $(".win8-notif-button").click(function () {
        //alert('hi');
        $(".notification").fadeOut("slow");
    });
}

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
a.btn,
a.btn:active,
a.btn:focus,
button.btn:active,
button.btn:focus,
button.btn:active,
button.btn:focus,
.dropdown-menu li a,
.dropdown-menu li a:active,
.dropdown-menu li a:focus,
.dropdown-menu li a:hover,
ul.dropdown-menu li a,
ul.dropdown-menu li a:active,
ul.dropdown-menu li a:focus,
ul.dropdown-menu li a:hover,
.nav-tabs li a,
.nav-tabs li a:active,
.nav-tabs li a:focus {
    outline: 0px !important;
    -webkit-appearance: none;
    text-decoration: none;
}
/* panel */
.panel {
    margin-top: 25px;
}
.panel .panel-heading {
    padding: 5px 5px 0 5px;
}
.panel .nav-tabs {
    border-bottom: none;
}
/* inactive tabs */
.nav > li > a {
    background-color: #f5f5f5;
    color: #676767;
    border-color: #dddddd;
    border-width: 1px;
    padding: 5px 15px;
    line-height: 2;
    -webkit-transition: all 0.75s;
    -moz-transition: all 0.75s;
    transition: all 0.75s;
}
.nav > li > a:active {
    background-color: #f5f5f5;
    color: #676767;
}
.nav > li > a:focus {
    background-color: #f5f5f5;
    color: #676767;
}
.nav > li > a:hover {
    background-color: #eeeeee;
    color: #676767;
    border-color: #dddddd;
}

/* active tabs */
.nav > li.active > a:hover {
    color: #222222;
}
/* table */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th {
    background-color: #000000;
    color: #ffffff;
    border-bottom: 1px solid #f3f3f3;
    border-top: 1px solid #f3f3f3 !important;
    line-height: 1.42857;
    padding: 8px;
    vertical-align: top;
}
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: 0px solid blue;
    line-height: 1.42857;
    padding: 8px;
    vertical-align: top;
    background-color: #f3f3f3;
}
.table-striped > tbody > tr:nth-child(2n + 1) > td {
    background-color: #ffffff;
}
/* buttons */
.btn-default.btn-outline:active,
.btn-default.btn-outline:focus,
.btn-default.btn-outline {
    color: #676767;
    border-color: #676767;
    background-color: transparent;
    border-width: 2px;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s;
}
.btn-default.btn-outline:hover {
    color: #000000;
    border-color: #000000;
    background-color: transparent;
    border-width: 2px;
    -webkit-transition: all 0.75s;
    -moz-transition: all 0.75s;
    transition: all 0.75s;
}
/* panel buttons */
.btn-group button.btn.btn-outline.btn-default {
    background-color: #f5f5f5;
    color: #676767;
    border-color: #dddddd;
    border-width: 1px;
    padding: 5px 15px;
    line-height: 2;
    -webkit-transition: all 0.75s;
    -moz-transition: all 0.75s;
    transition: all 0.75s;
}
.btn-group button.btn.btn-outline.btn-default:focus {
    background-color: #f5f5f5;
}
.btn-group button.btn.btn-outline.btn-default:active {
    background-color: #f5f5f5;
}
.btn-group button.btn.btn-outline.btn-default:hover {
    background-color: #eeeeee;
    border-width: 1px;
    -webkit-transition: all 0.75s;
    -moz-transition: all 0.75s;
    transition: all 0.75s;
}
.btn-outline.btn-highlight {
    color: #676767;
    border-color: #676767;
    background-color: transparent;
    border-width: 2px;
}
.display-title {
    font-family: verdana, arial, helvetica;
    color: #008400;
}
ul.nav.nav-tabs li.btn-group.active > a.btn.btn-default {
    border: 1px solid #dddddd;
    background-color: #ffffff;
    border-right: 0px;
    margin-right: 0px;
    border-bottom: 0px;
}
ul.nav.nav-tabs li.btn-group > a.btn.btn-default {
    border: 1px solid #f5f5f5;
    border-right: 0px;
    margin-right: 0px;
    border-bottom: 0px;
}
ul.nav.nav-tabs > li.btn-group.active > a.btn.dropdown-toggle {
    border: 1px solid #dddddd;
    background-color: #ffffff;
    margin-left: 0px;
    border-left: 0px;
    border-bottom: 0px;
}
ul.nav.nav-tabs > li.btn-group > a.btn.dropdown-toggle {
    border: 1px solid #f5f5f5;
    margin-left: 0px;
    border-left: 0px;
    border-bottom: 0px;
}
ul.nav.nav-tabs li.btn-group a.btn.dropdown-toggle span.caret {
    color: #f5f5f5;
}
ul.nav.nav-tabs li.btn-group.active > a.btn.dropdown-toggle > span.caret {
    color: #999999;
}
</style>

</head>
<body>
<div class="container">
    <div class="col-md-12">
        <div class="panel panel-default panel-fade">
            <div class="panel-heading">
                <span class="panel-title">
                    <div class="pull-left">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#letters" data-toggle="tab"><i class="glyphicon glyphicon-print"></i> letters</a>
                            </li>
                            <li>
                                <a href="#emails" data-toggle="tab"><i class="glyphicon glyphicon-send"></i> emails</a>
                            </li>
                            <li>
                                <a href="#loglist" data-toggle="tab"><i class="glyphicon glyphicon-list"></i> logs</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group pull-right">
                        <div class="btn-group">
                            <a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-cog"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">action 1</a></li>
                                <li><a href="#">action 2</a></li>
                                <li class="divider"></li>
                                <li><a href="#">another action</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </span>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="letters">
                        <h3>letters</h3>
                        <form action="" method="post">
                            <input type="hidden" name="formname" value="printletters" />
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>print</th>
                                        <th style="text-align: left;">subscription</th>
                                        <th style="text-align: left;">venue</th>
                                        <th>date/time</th>
                                        <th>quantity</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (winter)</td>
                                        <td>downtown theater</td>
                                        <td>1/1/2021 10:00 pm</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (spring)</td>
                                        <td>downtown theater</td>
                                        <td>1/1/2021 10:00 pm</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (summer)</td>
                                        <td>downtown theater</td>
                                        <td>1/1/2021 10:00 pm</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (fall)</td>
                                        <td>downtown theater</td>
                                        <td>1/1/2021 10:00 pm</td>
                                        <td>8</td>
                                    </tr>
                                </tbody>
                            </table>
                            select events and click below<br />
                            <br />
                            <input type="submit" class="btn btn-outline btn-default" value="submit" />
                        </form>
                    </div>
                    <div class="tab-pane fade" id="emails">
                        <h3>emails</h3>
                        <form action="" method="post">
                            <input type="hidden" name="formname" value="printletters" />
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>print</th>
                                        <th style="text-align: left;">subscription</th>
                                        <th style="text-align: left;">venue</th>
                                        <th>date/time</th>
                                        <th>quantity</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (spring)</td>
                                        <td>downtown theater</td>
                                        <td>1/2/2021 11:00 pm</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (winter)</td>
                                        <td>downtown theater</td>
                                        <td>1/2/2021 11:00 pm</td>
                                        <td>6</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (fall)</td>
                                        <td>downtown theater</td>
                                        <td>1/2/2021 11:00 pm</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (summer)</td>
                                        <td>downtown theater</td>
                                        <td>1/2/2021 11:00 pm</td>
                                        <td>7</td>
                                    </tr>
                                </tbody>
                            </table>
                            select events and click below<br />
                            <br />
                            <input type="submit" class="btn btn-outline btn-default" value="submit" />
                        </form>
                    </div>
                    <div class="tab-pane fade" id="loglist">
                        <h3>logs</h3>
                        <form action="" method="post">
                            <input type="hidden" name="formname" value="printletters" />
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>print</th>
                                        <th style="text-align: left;">subscription</th>
                                        <th style="text-align: left;">venue</th>
                                        <th>date/time</th>
                                        <th>quantity</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (fall)</td>
                                        <td>downtown theater</td>
                                        <td>1/3/2021 12:00 pm</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (spring)</td>
                                        <td>downtown theater</td>
                                        <td>1/3/2021 12:00 pm</td>
                                        <td>3</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (summer)</td>
                                        <td>downtown theater</td>
                                        <td>1/3/2021 12:00 pm</td>
                                        <td>6</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="eventcode" value="588031" /></td>
                                        <td>season subscription (winter)</td>
                                        <td>downtown theater</td>
                                        <td>1/3/2021 12:00 pm</td>
                                        <td>5</td>
                                    </tr>
                                </tbody>
                            </table>
                            select events and click below<br />
                            <br />
                            <input type="submit" class="btn btn-outline btn-default" value="submit" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$("a.btn.btn-default").hover(function (e) {
    $("a.btn.dropdown-toggle").trigger(e.type);
});
$(".display-fade").delay(25).animate({ opacity: "1" }, 800);
$(".table-fade").delay(25).animate({ opacity: "1" }, 800);
var def = "black";
function showNotification(color) {
    $("#notification").removeClass(def);
    $("#notification").addClass(color);
    def = color;
    $("#notification").fadeIn("slow");
    //alert('hi');
    $(".win8-notif-button").click(function () {
        //alert('hi');
        $(".notification").fadeOut("slow");
    });
}
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS