<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Horizontal Timeline - Bootstrap 5</
title
>
<
link
rel
=
"stylesheet"
href
=
<
style
>
body {
background: #eee;
margin-top: 20px;
}
.hori-timeline .events {
border-top: 3px solid green;
}
.hori-timeline .events
.event-list {
display: block;
position: relative;
text-align: center;
margin-right: 0;
}
.hori-timeline .events
.event-list:before {
content: "";
position: absolute;
height: 36px;
border-right: 2px dashed #2ddf36;
top: 0;
}
.hori-timeline .events .event-list
.event-date {
position: absolute;
top: 38px;
left: 0;
right: 0;
width: 75px;
margin: 0 auto;
border-radius: 4px;
padding: 2px 4px;
}
@media (min-width: 1140px) {
.hori-timeline .events
.event-list {
display: inline-block;
width: 24%;
padding-top: 45px;
}
.hori-timeline .events
.event-list .event-date {
top: -12px;
}
}
.card {
border: none;
margin-bottom: 24px;
box-shadow: 0 0 13px 0 rgba(236, 236, 241, 0.44);
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
class
=
"row"
>
<
div
class
=
"col-lg-12"
>
<
div
class
=
"card"
>
<
div
class
=
"card-body"
>
<
h4
class
=
"card-title mb-5 text-success"
>
Bootstrap 5 Horizontal Timeline
</
h4
>
<
div
class
=
"hori-timeline"
dir
=
"ltr"
>
<
ul
class
=
"list-inline events"
>
<
li
class
=
"list-inline-item event-list"
>
<
div
class
=
"px-4"
>
<
h5
class
=
"font-size-16 text-primary"
>
GPL 2021
</
h5
>
<
p
class
=
"text-info"
>
This contest is over now and prize
distribution is over now thank you
for join.
</
p
>
<
div
>
class
=
"btn btn-success btn-sm"
>
Read more...
</
a
>
</
div
>
</
div
>
</
li
>
<
li
class
=
"list-inline-item event-list"
>
<
div
class
=
"px-4"
>
<
h5
class
=
"font-size-16 text-warning"
>
GPL 2022
</
h5
>
<
p
class
=
"text-muted"
>
This contest is over now check
your result in the dashbord section.
</
p
>
<
div
>
class
=
"btn btn-success btn-sm"
>
Read more...
</
a
>
</
div
>
</
div
>
</
li
>
<
li
class
=
"list-inline-item event-list"
>
<
div
class
=
"px-4"
>
<
h5
class
=
"font-size-16 text-danger"
>
GPL-2023
</
h5
>
<
p
class
=
"text-primary"
>
This contest is over we start the
prize distribution soon please check
what you earn.
</
p
>
<
div
>
class
=
"btn btn-success btn-sm"
>
Read more...
</
a
>
</
div
>
</
div
>
</
li
>
<
li
class
=
"list-inline-item event-list"
>
<
div
class
=
"px-4"
>
<
h5
class
=
"font-size-16 text-success"
>
GPL 2024
</
h5
>
<
p
class
=
"text-muted"
>
This contest comming soon you can show
it in the geeksforgeeks portal.
</
p
>
<
div
>
<
a
href
=
class
=
"btn btn-success btn-sm"
>
Read more...
</
a
>
</
div
>
</
div
>
</
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
src
=
</
script
>
</
body
>
</
html
>