Horizontal Timeline Design Using HTML CSS and Bootstrap

Horizontal Timeline Design Using HTML CSS and Bootstrap
Code Snippet:Horizontal Timeline design using html,css and bootstrap
Author: zhaoyafei
Published: 1 month ago
Last Updated: June 13, 2024
Downloads: 153
License: MIT
Edit Code online: View on CodePen
Read More

This code snippet helps you to create a horizontal timeline design using HTML, CSS, and Bootstrap. The timeline displays events with dates and descriptions. It features a clean, organized design that aligns items horizontally. Each event is styled with dates and content boxes for easy readability. This is useful for visually representing chronological events on a website.

You can use this code on your personal website or portfolio to showcase events or project milestones. One benefit is its clean, visually appealing design that enhances user experience.

How to Create Horizontal Timeline Design Using HTML CSS and Bootstrap

1. First of all, add the Bootstrap CSS file to your HTML header to ensure your timeline is responsive and styled correctly.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

2. Use the following HTML structure to set up your timeline. This code includes containers for the timeline and individual timeline events.

<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<section class="main-timeline-section">
<div class="timeline-start"></div>
<div class="conference-center-line"></div>
<div class="conference-timeline-content">
<div class="timeline-article timeline-article-top">
<div class="content-date">
<span>10-09-2017</span>
</div>
<div class="meta-date"></div>
<div class="content-box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="timeline-article timeline-article-bottom">
<div class="content-date">
<span>10-09-2017</span>
</div>
<div class="meta-date"></div>
<div class="content-box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="timeline-article timeline-article-top">
<div class="content-date">
<span>10-09-2017</span>
</div>
<div class="meta-date"></div>
<div class="content-box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="timeline-article timeline-article-bottom">
<div class="content-date">
<span>10-09-2017</span>
</div>
<div class="meta-date"></div>
<div class="content-box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
</div>
<div class="timeline-end"></div>
</section>
</div>
</div>
</div>

3. Now, use the following CSS to style the body and the main timeline container. Apply styles to the timeline start and end points, the center line, and the individual articles.

body{
background-color: #f1f1f1;
}
.main-timeline-section{
position: relative;
width: 100%;
margin:auto;
height:300px;
}
.main-timeline-section .timeline-start,
.main-timeline-section .timeline-end{
position: absolute;
background:#F2635F;
border-radius:100px;
top:50%;
transform: translateY(-50%);
width:30px;
height:30px;
}
.main-timeline-section .timeline-end{
right:0px;
}
.main-timeline-section .conference-center-line{
position: absolute;
width:100%;
height:5px;
top:50%;
transform: translateY(-50%);
background:#F2635F;
}
.timeline-article{
width: 20%;
position: relative;
min-height: 300px;
float:right;
}
.timeline-article .content-date{
position: absolute;
top: 35%;
left: -30px;
font-size:18px;
}
.timeline-article .meta-date{
position: absolute;
top: 50%;
left: 0px;
transform: translateY(-50%);
width:20px;
height:20px;
border-radius: 100%;
background:#fff;
border:1px solid #F2635F;
}
.timeline-article .content-box{
box-shadow: 2px 2px 4px 0px #c1c1c1;
border:1px solid #F2635F;
border-radius: 5px;
background-color: #fff;
width: 180px;
position: absolute;
top: 60%;
left: -80px;
padding:10px;
}
.timeline-article-top .content-box:before{
content: " ";
position:absolute;
left:50%;
transform: translateX(-50%);
top:-20px;
border:10px solid transparent;
border-bottom-color: #F2635F;
}
.timeline-article-bottom .content-date{
top: 59%;
}
.timeline-article-bottom .content-box{
top: 0%;
}
.timeline-article-bottom .content-box:before{
content: " ";
position:absolute;
left:50%;
transform: translateX(-50%);
bottom:-20px;
border:10px solid transparent;
border-top-color:#F2635F;
}
@media (max-width:460px){
body{
display: none;
}
}

You can customize the appearance of the timeline articles, including the dates and content boxes according to your needs.

That’s all! hopefully, you have successfully created a horizontal timeline in HTML CSS and Bootstrap. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.