Bootstrap 5 timeline layouts display chronological content in a visual flow. This page covers 4 patterns — activity feed, card timeline, alternating and horizontal step tracker — all built with custom CSS.
Key CSS Pattern
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
content: '';
position: absolute;
left: 10px; top: 0; bottom: 0;
width: 2px;
background: #e5e7eb;
}
.timeline-dot {
position: absolute;
left: -27px;
width: 16px; height: 16px;
border-radius: 50%;
}
1. Bootstrap 5 Activity Timeline
Compact activity feed timeline with icons, timestamps and colored dots.
2. Bootstrap 5 Card Timeline
Timeline with card content blocks — good for project milestones and version history.
3. Bootstrap 5 Alternating Timeline
Classic alternating left-right timeline layout for project roadmaps and history pages.
4. Bootstrap 5 Horizontal Timeline
Horizontal step timeline for showing stages, process flows and order tracking.
Frequently Asked Questions
Bootstrap 5 has no built-in timeline component. Build it with CSS: a container with position:relative and a ::before pseudo-element for the vertical line (position:absolute, width:2px). Each item has position:relative with a dot (::before or a div) positioned absolute on the left.
Use display:flex on each item. Odd items justify-content:flex-end with padding-right:calc(50% + 20px). Even items justify-content:flex-start with padding-left:calc(50% + 20px). The center line is a ::before pseudo-element on the container.
Make the dot div display:flex align-items:center justify-content:center and add an emoji or Bootstrap Icon inside: <div class='timeline-dot bg-success text-white'><i class='bi bi-check'></i></div>.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.