Hello friends, in this article we will learn how to create a CSS Timeline using Bootstrap, and I have listed the Top 20 HTML Timeline examples which are available on Codepen.
How to create a CSS Timeline using Bootstrap
Step 1 — Creating a New Project
In this step, we need to create a new project folder and files(index.html,style.css) for creating aHTML Timeline. In the next step, you will start creating the structure of the webpage.
Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>How to create a Timeline using Bootstrap</title> <link rel="stylesheet" href="style.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"></head><body> </body></html>
This is the base structure of most web pages that use HTML.
Add the following code inside the<body>tag:
<div class="container mt-5 mb-5"> <div class="row"> <div class="col-md-6 offset-md-3"> <h4>Latest News</h4> <ul class="timeline"> <li> <a target="_blank" href="https://blog.stackfindover.com/css-timeline-examples">CSS Timeline</a> <a href="#" class="float-end">20 March, 2015</a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p> </li> <li> <a href="#">21 000 Job Seekers</a> <a href="#" class="float-end">15 April, 2016</a> <p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo acc*msan, sed semper nisi sollicitudin...</p> </li> <li> <a href="#">Awesome Employers</a> <a href="#" class="float-end">10 May, 2017</a> <p>Fusce ullamcorper ligula sit amet quam acc*msan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p> </li> </ul> </div> </div></div><div class="text-muted mt-5 mb-5 text-center small">by : <a class="text-muted" target="_blank" href="https://blog.stackfindover.com/">Stackfindover Blog</a></div>
Step 3 — Adding Styles for the Classes
In this step, we will add styles to the section class Inside style.css file
* { padding: 0; margin: 0;}ul.timeline { list-style-type: none; position: relative}ul.timeline:before { content: ' '; background: #d4d9df; display: inline-block; position: absolute; left: 29px; width: 2px; height: 100%; z-index: 400}ul.timeline>li { margin: 20px 0; padding-left: 20px}ul.timeline>li:before { content: ' '; background: white; display: inline-block; position: absolute; border-radius: 50%; border: 3px solid #22c0e8; left: 20px; width: 20px; height: 20px; z-index: 400}#Final Result
![CSS Timeline [ Top 20 HTML Timeline Design ] (1)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Timeline-using-Bootstrap.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (1)")
Best collection of HTML Timeline
In this collection, I have listed over 20 best HTML Timeline Check out these AwesomeTimeline Designlike:#1Responsive Vertical Timeline,#2Horizontal Timeline,#3Bootstrap Timeline, and many more.
#1 Vertical Timeline With CSS
![CSS Timeline [ Top 20 HTML Timeline Design ] (2)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Vertical-Timeline-With-CSS.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (2)")
Vertical Timeline With CSS, which was developed byEnvato Tuts+. Moreover, you can customize it according to your wish and need.
| Author: | Envato Tuts+ |
| Created on: | May 24, 2016 |
| Made with: | HTML, CSS & JS |
| Demo Link: | Source Code / Demo |
| Tags: | Vertical Timeline |
#2 Responsive Vertical Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (3)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Responsive-Vertical-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (3)")
Responsive Vertical Timeline, which was developed byRatko Solaja. Moreover, you can customize it according to your wish and need.
| Author: | Ratko Solaja |
| Created on: | September 20, 2014 |
| Made with: | HTML & CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Responsive Vertical Timeline |
#3 Simple Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (4)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Simple-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (4)")
Simple Timeline, which was developed byShireen Taj Moreover, you can customize it according to your wish and need.
| Author: | Shireen Taj |
| Created on: | July 10, 2020 |
| Made with: | HTML & CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | Simple Timeline |
#4 HTML Multi Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (5)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/HTML-Multi-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (5)")
HTML Multi Timeline, which was developed byAslam Moreover, you can customize it according to your wish and need.
| Author: | Aslam |
| Created on: | August 22, 2019 |
| Made with: | HTML & CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | HTML Multi Timeline |
#5 UIkit 3 CSS Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (6)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/UIkit-3-CSS-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (6)")
UIkit 3 Timeline, which was developed byCorentin Moreover, you can customize it according to your wish and need.
| Author: | Corentin |
| Created on: | April 24, 2020 |
| Made with: | HTML & CSS |
| Demo Link: | Source Code / Demo |
| Tags: | UIkit Timeline |
#6 Horizontal Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (7)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Horizontal-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (7)")
Horizontal Timeline, which was developed byRitesh Kumar Moreover, you can customize it according to your wish and need.
| Author: | Ritesh Kumar |
| Created on: | December 25, 2015 |
| Made with: | HTML, CSS & JS |
| Demo Link: | Source Code / Demo |
| Tags: | Horizontal Timeline |
#7 HTML Vertical Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (8)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Vertical-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (8)")
HTML Vertical Timeline, which was developed bySava Lazic Moreover, you can customize it according to your wish and need.
| Author: | Sava Lazic |
| Created on: | September 5, 2016 |
| Made with: | HTML, CSS(SCSS) & JS |
| Demo Link: | Source Code / Demo |
| Tags: | HTML Vertical Timeline |
#8 Simple Responsive Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (9)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Simple-Responsive-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (9)")
Simple Responsive Timeline, which was developed byBrady Wright Moreover, you can customize it according to your wish and need.
| Author: | Brady Wright |
| Created on: | April 28, 2016 |
| Made with: | HTML & CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | Responsive Timeline |
#9 Bootstrap Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (10)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Bootstrap-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (10)")
Bootstrap Timeline, which was developed byJason Davis Moreover, you can customize it according to your wish and need.
| Author: | Jason Davis |
| Created on: | January 31, 2014 |
| Made with: | HTML & CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Bootstrap Timeline |
#10 Timeline Style Navigation
![CSS Timeline [ Top 20 HTML Timeline Design ] (11)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Timeline-Style-Navigation.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (11)")
Timeline Style Navigation, which was developed byNaila Ahmad Moreover, you can customize it according to your wish and need.
| Author: | Naila Ahmad |
| Created on: | May 5, 2016 |
| Made with: | HTML, CSS(SCSS) & JS |
| Demo Link: | Source Code / Demo |
| Tags: | Timeline Style Navigation |
#11 CSS Timeline with Custom Properties
![CSS Timeline [ Top 20 HTML Timeline Design ] (12)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/CSS-Timeline-with-Custom-Properties.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (12)")
CSS Timeline with Custom Properties, which was developed byStas Melnikov Moreover, you can customize it according to your wish and need.
| Author: | Stas Melnikov |
| Created on: | September 30, 2017 |
| Made with: | HTML & CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Timeline with Custom Properties |
#12 jQuery Scroll Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (13)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/jQuery-Scroll-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (13)")
jQuery Scroll Timeline, which was developed byViktor Moreover, you can customize it according to your wish and need.
| Author: | Viktor |
| Created on: | February 18, 2018 |
| Made with: | HTML(Pug), CSS(SCSS) & JS |
| Demo Link: | Source Code / Demo |
| Tags: | jQuery Scroll Timeline |
#13 Vertical Left and Right Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (14)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Vertical-Left-and-Right-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (14)")
Vertical Left and Right Timeline, which was developed byCP Lepage Moreover, you can customize it according to your wish and need.
| Author: | CP Lepage |
| Created on: | January 24, 2018 |
| Made with: | HTML(Pug) & CSS(Sass) |
| Demo Link: | Source Code / Demo |
| Tags: | Left and Right Timeline |
#14 Animated Milestones Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (15)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Animated-Milestones-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (15)")
Animated Milestones Timeline, which was developed byjanuaryofmine Moreover, you can customize it according to your wish and need.
| Author: | januaryofmine |
| Created on: | March 29, 2019 |
| Made with: | HTML, CSS(SCSS) & JS |
| Demo Link: | Source Code / Demo |
| Tags: | Animated Timeline |
#15 Process Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (16)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Process-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (16)")
Process Timeline, which was developed byPop Razvan Moreover, you can customize it according to your wish and need.
| Author: | Pop Razvan |
| Created on: | May 1, 2019 |
| Made with: | HTML, CSS(SCSS) & JS |
| Demo Link: | Source Code / Demo |
| Tags: | Process Timeline |
#16 Horizontal Responsive Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (17)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Horizontal-Responsive-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (17)")
Horizontal Responsive Timeline, which was developed byNicko Afan Moreover, you can customize it according to your wish and need.
| Author: | Nicko Afan |
| Created on: | January 27, 2016 |
| Made with: | HTML & CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | Horizontal Responsive Timeline |
#17 Serpentine Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (18)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Serpentine-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (18)")
Serpentine Timeline, which was developed byamCharts team Moreover, you can customize it according to your wish and need.
| Author: | amCharts team |
| Created on: | March 6, 2020 |
| Made with: | HTML, CSS & JS |
| Demo Link: | Source Code / Demo |
| Tags: | Serpentine Timeline |
#18 Vertical Timeline Design
![CSS Timeline [ Top 20 HTML Timeline Design ] (19)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Vertical-Timeline-Design.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (19)")
Vertical Timeline Design, which was developed byFrankieDoodie Moreover, you can customize it according to your wish and need.
| Author: | FrankieDoodie |
| Created on: | November 9, 2018 |
| Made with: | HTML & CSS |
| Demo Link: | Source Code / Demo |
| Tags: | CSS Vertical Timeline |
#19 Pure CSS News Timeline
![CSS Timeline [ Top 20 HTML Timeline Design ] (20)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Pure-CSS-News-Timeline.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (20)")
Pure CSS News Timeline, which was developed byMd Nahidul Islam Moreover, you can customize it according to your wish and need.
| Author: | Md Nahidul Islam |
| Created on: | July 26, 2017 |
| Made with: | HTML & CSS |
| Demo Link: | Source Code / Demo |
| Tags: | News Timeline |
#20 Horizontal Timeline with jQuery
![CSS Timeline [ Top 20 HTML Timeline Design ] (21)](https://i0.wp.com/blog.stackfindover.com/wp-content/uploads/2021/10/Horizontal-Timeline-with-Jquery.jpg "CSS Timeline [ Top 20 HTML Timeline Design ] (21)")
Horizontal Timeline with jQuery, which was developed byXiChen Moreover, you can customize it according to your wish and need.
| Author: | XiChen |
| Created on: | July 14, 2017 |
| Made with: | HTML(Pug), CSS(Sass) & JS |
| Demo Link: | Source Code / Demo |
| Tags: | Timeline with jQuery |
If you liked this article Top 20 HTML Timeline Design Examples, you should check out this one 20 Best Navbar Examples![CSS Timeline [ Top 20 HTML Timeline Design ] (2024)](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/h8AAvMB+NzmkbcAAAAASUVORK5CYII=)