|
A horizontal timeline is a graphical representation of events or milestones displayed horizontally along a linear axis. It’s a visual way to showcase a series of events or points in time, typically arranged from left to right. Each event may include details such as a title, date, description, and links for additional information.
Preview Image: Output Approach:- Create the HTML structure for the horizontal timeline using the <div>, heading, <p>, <ul>, <li> etc tags.
- Now, add the bootstrap CSS and JavaScript CDN to include it in your HTML document and utilize it.
- Use the grid system to organize the layout of the timeline. Typically, events are represented as cards or sections within a container element.
- Apply custom CSS to achieve the desired visual appearance of the timeline, including line styles, spacing, and alignment.
- Populate the timeline with events, including titles, descriptions, and links for additional information.
Example: The below code explains how you can use bootstrap to create a horizontal timeline.
HTML
<!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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<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>
<a href="/archive/"
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>
<a href="/archive/"
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>
<a href="/archive/"
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 horje portal.
</p>
<div>
<a href=
"/archive/"
class="btn btn-success btn-sm">
Read more...
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
</body>
</html>
Output:
Output
|
