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:
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 =
< 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 >
|
Output: