Event Schedule List Snippet
- Version 1.0
- Download 0
- File Size 54.22 KB
- File Count 1
- Create Date November 10, 2025
- Last Updated November 12, 2025
Event Schedule List Snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Event Schedule list - Bootdey.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
margin-top: 20px;
}
.event-schedule-area .section-title .title-text {
margin-bottom: 50px;
}
.event-schedule-area .tab-area .nav-tabs {
border-bottom: inherit;
}
.event-schedule-area .tab-area .nav {
border-bottom: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 80px;
}
.event-schedule-area .tab-area .nav-item {
margin-bottom: 75px;
}
.event-schedule-area .tab-area .nav-item .nav-link {
text-align: center;
font-size: 22px;
color: #333;
font-weight: 600;
border-radius: inherit;
border: inherit;
padding: 0px;
text-transform: capitalize !important;
}
.event-schedule-area .tab-area .nav-item .nav-link.active {
color: #4125dd;
background-color: transparent;
}
.event-schedule-area .tab-area .tab-content .table {
margin-bottom: 0;
width: 80%;
}
.event-schedule-area .tab-area .tab-content .table thead td,
.event-schedule-area .tab-area .tab-content .table thead th {
border-bottom-width: 1px;
font-size: 20px;
font-weight: 600;
color: #252525;
}
.event-schedule-area .tab-area .tab-content .table td,
.event-schedule-area .tab-area .tab-content .table th {
border: 1px solid #b7b7b7;
padding-left: 30px;
}
.event-schedule-area .tab-area .tab-content .table tbody th .heading,
.event-schedule-area .tab-area .tab-content .table tbody td .heading {
font-size: 16px;
text-transform: capitalize;
margin-bottom: 16px;
font-weight: 500;
color: #252525;
margin-bottom: 6px;
}
.event-schedule-area .tab-area .tab-content .table tbody th span,
.event-schedule-area .tab-area .tab-content .table tbody td span {
color: #4125dd;
font-size: 18px;
text-transform: uppercase;
margin-bottom: 6px;
display: block;
}
.event-schedule-area .tab-area .tab-content .table tbody th span.date,
.event-schedule-area .tab-area .tab-content .table tbody td span.date {
color: #656565;
font-size: 14px;
font-weight: 500;
margin-top: 15px;
}
.event-schedule-area .tab-area .tab-content .table tbody th p {
font-size: 14px;
margin: 0;
font-weight: normal;
}
.event-schedule-area-two .section-title .title-text h2 {
margin: 0px 0 15px;
}
.event-schedule-area-two ul.custom-tab {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-bottom: 1px solid #dee2e6;
margin-bottom: 30px;
}
.event-schedule-area-two ul.custom-tab li {
margin-right: 70px;
position: relative;
}
.event-schedule-area-two ul.custom-tab li a {
color: #252525;
font-size: 25px;
line-height: 25px;
font-weight: 600;
text-transform: capitalize;
padding: 35px 0;
position: relative;
}
.event-schedule-area-two ul.custom-tab li a:hover:before {
width: 100%;
}
.event-schedule-area-two ul.custom-tab li a:before {
position: absolute;
left: 0;
bottom: 0;
content: "";
background: #4125dd;
width: 0;
height: 2px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.event-schedule-area-two ul.custom-tab li a.active {
color: #4125dd;
}
.event-schedule-area-two .primary-btn {
margin-top: 40px;
}
.event-schedule-area-two .tab-content .table {
-webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 0;
}
.event-schedule-area-two .tab-content .table thead {
background-color: #007bff;
color: #fff;
font-size: 20px;
}
.event-schedule-area-two .tab-content .table thead tr th {
padding: 20px;
border: 0;
}
.event-schedule-area-two .tab-content .table tbody {
background: #fff;
}
.event-schedule-area-two .tab-content .table tbody tr.inner-box {
border-bottom: 1px solid #dee2e6;
}
.event-schedule-area-two .tab-content .table tbody tr th {
border: 0;
padding: 30px 20px;
vertical-align: middle;
}
.event-schedule-area-two .tab-content .table tbody tr th .event-date {
color: #252525;
text-align: center;
}
.event-schedule-area-two .tab-content .table tbody tr th .event-date span {
font-size: 50px;
line-height: 50px;
font-weight: normal;
}
.event-schedule-area-two .tab-content .table tbody tr td {
padding: 30px 20px;
vertical-align: middle;
}
.event-schedule-area-two .tab-content .table tbody tr td .r-no span {
color: #252525;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap h3 a {
font-size: 20px;
line-height: 20px;
color: #cf057c;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap h3 a:hover {
color: #4125dd;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .categories {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin: 10px 0;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .categories a {
color: #252525;
font-size: 16px;
margin-left: 10px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .categories a:before {
content: " 07b";
font-family: fontawesome;
padding-right: 5px;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .time span {
color: #252525;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .organizers {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin: 10px 0;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .organizers a {
color: #4125dd;
font-size: 16px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .organizers a:hover {
color: #4125dd;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .organizers a:before {
content: " 007";
font-family: fontawesome;
padding-right: 5px;
}
.event-schedule-area-two .tab-content .table tbody tr td .primary-btn {
margin-top: 0;
text-align: center;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-img img {
width: 100px;
height: 100px;
border-radius: 8px;
}
</style>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="event-schedule-area-two bg-color pad100">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title text-center">
<div class="title-text">
<h2>Event Schedule</h2>
</div>
<p>
In ludus latine mea, eos paulo quaestio an. Meis possit ea sit. Vidisse molestie<br />
cum te, sea lorem instructior at.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="nav custom-tab" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active show" id="January-tab" data-toggle="tab" href="#January"
role="tab" aria-controls="January" aria-selected="true">January</a>
</li>
<li class="nav-item">
<a class="nav-link" id="February-tab" data-toggle="tab" href="#February" role="tab"
aria-controls="February" aria-selected="false">February</a>
</li>
<li class="nav-item">
<a class="nav-link" id="March-tab" data-toggle="tab" href="#March" role="tab"
aria-controls="March" aria-selected="false">March</a>
</li>
<li class="nav-item d-none d-lg-block">
<a class="nav-link" id="April-tab" data-toggle="tab" href="#April" role="tab"
aria-controls="April" aria-selected="false">April</a>
</li>
<li class="nav-item mr-0 d-none d-lg-block">
<a class="nav-link" id="May-tab" data-toggle="tab" href="#May" role="tab"
aria-controls="May" aria-selected="false">May</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade active show" id="January" role="tabpanel">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="text-center" scope="col">Date</th>
<th scope="col">Session</th>
<th scope="col">Venue</th>
<th class="text-center" scope="col">Book</th>
</tr>
</thead>
<tbody>
<tr class="inner-box">
<th scope="row">
<div class="event-date">
<span>30</span>
<p>January</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Mandt</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
<tr class="inner-box">
<th scope="row">
<div class="event-date">
<span>20</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Toni Duggan</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room D3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
<tr class="inner-box border-bottom-0">
<th scope="row">
<div class="event-date">
<span>18</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Billal Hossain</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room A3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="February" role="tabpanel" aria-labelledby="February-tab">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Speakers</th>
<th scope="col">Session</th>
<th scope="col">Venue</th>
<th scope="col">Venue</th>
</tr>
</thead>
<tbody>
<tr class="inner-box">
<th scope="row">
<div class="event-date">
<span>16</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Toni Duggan</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
<tr class="inner-box">
<th scope="row">
<div class="event-date">
<span>16</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Harman Kardon</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
<tr class="inner-box border-bottom-0">
<th scope="row">
<div class="event-date">
<span>16</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Billal Hossain</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="March" role="tabpanel" aria-labelledby="March-tab">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Speakers</th>
<th scope="col">Session</th>
<th scope="col">Venue</th>
<th scope="col">Venue</th>
</tr>
</thead>
<tbody>
<tr class="inner-box">
<th scope="row">
<div class="event-date">
<span>16</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Harman Kardon</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
<tr class="inner-box">
<th scope="row">
<div class="event-date">
<span>16</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Billal Hossain</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
<tr class="inner-box border-bottom-0">
<th scope="row">
<div class="event-date">
<span>16</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Toni Duggan</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="April" role="tabpanel" aria-labelledby="April-tab">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Speakers</th>
<th scope="col">Session</th>
<th scope="col">Venue</th>
<th scope="col">Venue</th>
</tr>
</thead>
<tbody>
<tr class="inner-box">
<th scope="row">
<div class="event-date">
<span>16</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Toni Duggan</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
<tr class="inner-box">
<th scope="row">
<div class="event-date">
<span>16</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Harman Kardon</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
<tr class="inner-box border-bottom-0">
<th scope="row">
<div class="event-date">
<span>16</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Billal Hossain</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="May" role="tabpanel" aria-labelledby="May-tab">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Speakers</th>
<th scope="col">Session</th>
<th scope="col">Venue</th>
<th scope="col">Venue</th>
</tr>
</thead>
<tbody>
<tr class="inner-box">
<th scope="row">
<div class="event-date">
<span>16</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Harman Kardon</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
<tr class="inner-box">
<th scope="row">
<div class="event-date">
<span>18</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Toni Duggan</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
<tr class="inner-box border-bottom-0">
<th scope="row">
<div class="event-date">
<span>20</span>
<p>Novembar</p>
</div>
</th>
<td>
<div class="event-img">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt />
</div>
</td>
<td>
<div class="event-wrap">
<h3><a href="#">Billal Hossain</a></h3>
<div class="meta">
<div class="organizers">
<a href="#">Aslan Lingker</a>
</div>
<div class="categories">
<a href="#">Inspire</a>
</div>
<div class="time">
<span>05:35 AM - 08:00 AM 2h 25'</span>
</div>
</div>
</div>
</td>
<td>
<div class="r-no">
<span>Room B3</span>
</div>
</td>
<td>
<div class="primary-btn">
<a class="btn btn-primary" href="#">Read More</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- <div class="primary-btn text-center">
<a href="#" class="btn btn-primary">Download Schedule</a>
</div> -->
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>