Timelines

What is a timeline component?

A timeline displays events in chronological order along a vertical or horizontal line. Each entry usually has a date or time, a title, a short description and a marker such as a dot or icon. Timelines are used for company histories, project roadmaps, order and shipment tracking, activity feeds, changelogs, CVs and event schedules.

When to use a timeline

Use a timeline when the order and timing of events matter to the reader. For a process the user is currently going through, such as a checkout, a stepper is usually more appropriate; for a simple feed without emphasis on time, a list may be enough.

Best practices

• Use an ordered list (<ol>) because the sequence carries meaning, and mark dates with <time datetime="...">.
• Keep the connecting line and markers decorative; they should not contain information that is missing from the text.
• If markers use colour to indicate status (done, current, upcoming), also state the status in text.
• Alternating left-right layouts look good on desktop but should collapse to a single column on mobile.
• Horizontal timelines need a scrollable container on small screens and keyboard-accessible scrolling.
• Keep entries concise and link to details instead of putting long content into each item.
• If entries animate in on scroll, respect prefers-reduced-motion.

Bootstrap, Tailwind CSS and pure CSS versions

The timeline examples cover Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions combine the grid with border, spacing and badge utilities, and Bootstrap 6 variants use the theme-* colour roles for markers and lines. Tailwind CSS versions are built with utilities, while pure CSS versions draw the line and markers with pseudo-elements and custom properties. Filter by framework, review vertical and horizontal timelines in the live preview, then copy the HTML and CSS from the code tabs or download the snippet. Replace the dates and events with your own data.