4 Free Horizontal Timeline Templates in HTML & CSS – uiCookies

These horizontal timelines were designed and coded in-house by uiCookies. Each one is a single self-contained HTML file — inline CSS, no JavaScript, no libraries — and each solves the horizontal-timeline problem a different way: stepping, scrolling, alternating, or connecting.

Horizontal timelines fail most often on small screens, so every design here carries its own mobile answer: the progress steps and milestone cards rotate into vertical layouts below their breakpoints, and the history track scrolls with native CSS scroll-snap instead of a slider script.

Download all 10 (free) Browse live demos

The horizontal designs

1. Horizontal Progress Steps

Checkout-style steps with done, current, and upcoming states on a horizontal connector. Below 640px it rotates into a vertical stepper automatically.

Live Demo

2. Horizontal Scroll History

A sideways-scrolling company history with CSS scroll-snap — each era snaps into place as you scroll. No JavaScript, just overflow and snap points.

Live Demo

3. Horizontal Roadmap by Quarters

Quarter markers along a gradient line with cards alternating above and below it. The classic conference-slide roadmap, as responsive HTML.

Live Demo

4. Horizontal Milestone Cards

Numbered circles on a connector line with equal-height cards beneath — the “how it works” section every landing page eventually needs.

Live Demo

Also in the pack: six vertical timelines

The download includes six vertical companions built in the same style — classic vertical, minimal release-notes, dark roadmap, activity feed, gradient glow, resume / cv — covered in detail on our CSS timeline templates page. One ZIP, all ten designs.

Frequently asked questions

How do I make a horizontal timeline in HTML and CSS?

The core trick is a flex row of items with a connector drawn as an absolutely positioned line or per-item border, plus markers positioned on top of it. All four designs here use that approach with no JavaScript — download the pack and read the CSS block of any design to see the pattern.

How do horizontal timelines work on mobile?

Two strategies, both included: rotate the layout into a vertical timeline below a breakpoint (progress steps, quarters, milestones), or keep it horizontal but make it swipeable with CSS scroll-snap (the history track).

Do these work with Bootstrap or React?

Yes — they are plain HTML and CSS with their own class names, so they drop into Bootstrap, React, Vue, or plain pages without conflicts.

Designed & written by Aigars Silkalns

Aigars Silkalns is a Latvian entrepreneur and web developer who founded Colorlib, a hub for distinctive WordPress themes. Trained in technology and design, he began as a freelancer and launched Colorlib in 2013, earning acclaim for user-friendly, modern, responsive themes. A champion of open source, Silkalns shares insights on web trends and entrepreneurship. His mission is to make web design simple and accessible, empowering people worldwide to build professional sites with ease.

XLinkedInMore about uiCookies →