Posted inFront-End

Responsive Horizontal Timeline Using Bootstrap

June 15, 2023Posted inFront-End
Responsive Horizontal Timeline Bootstrap
Getting your Trinity Audio player ready...

If you’ve ever tried to build a horizontal timeline, you already know the pain:

  • It looks fine on desktop
  • Breaks completely on mobile
  • CSS becomes messy fast
  • JavaScript feels overkill

Most tutorials either:

  • Go SVG-heavy ❌
  • Use complex JS sliders ❌
  • Ignore responsiveness ❌

Let’s do this the practical way — a responsive horizontal timeline using Bootstrap, built with clean HTML + CSS, minimal logic, and behavior that actually makes sense on real screens.

Let’s do this the practical way — a responsive horizontal timeline using Bootstrap, built with clean HTML + CSS, minimal logic, and behavior that actually makes sense on real screens.

What we’re building

A timeline that:

  • Displays horizontally on desktop
  • Scrolls smoothly instead of breaking
  • Stacks or becomes swipe-friendly on mobile
  • Uses Bootstrap utilities, not hacks

No plugins. No sliders. Just solid layout logic.

Why Bootstrap works well for timelines

Bootstrap already gives us:

  • Flexbox utilities
  • Responsive breakpoints
  • Spacing & alignment helpers
  • Scroll handling

So instead of fighting CSS, we lean into the framework.

Basic structure (HTML)

Here’s the clean base structure:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container py-5">
  <h2 class="mb-4">Project Timeline</h2>

  <div class="timeline-wrapper overflow-auto">
    <div class="timeline d-flex flex-nowrap">
      <div class="timeline-item">
        <span class="dot"></span>
        <h6>Planning</h6>
        <p>Project requirements</p>
      </div>
      <div class="timeline-item">
        <span class="dot"></span>
        <h6>Design</h6>
        <p>UI & UX phase</p>
      </div>
      <div class="timeline-item">
        <span class="dot"></span>
        <h6>Development</h6>
        <p>Core implementation</p>
      </div>
      <div class="timeline-item">
        <span class="dot"></span>
        <h6>Launch</h6>
        <p>Go live</p>
      </div>
    </div>
  </div>
</div>

Key Bootstrap classes doing the heavy lifting:

  • d-flex flex-nowrap → forces horizontal layout
  • overflow-auto → enables scroll on small screens

Styling the timeline (CSS)

Minimal CSS — just structure and clarity.

.timeline {
  gap: 4rem;
  padding-bottom: 1rem;
}

.timeline-item {
  position: relative;
  min-width: 220px;
  text-align: center;
}

.timeline-item h6 {
  margin-top: 1rem;
}

.dot {
  width: 14px;
  height: 14px;
  background: #0d6efd;
  border-radius: 50%;
  display: inline-block;
}

.timeline::before {
  content: "";
  position: absolute;
  height: 2px;
  background: #dee2e6;
  top: 7px;
  left: 0;
  right: 0;
}

What this does:

  • Keeps items evenly spaced
  • Draws a horizontal line behind dots
  • Avoids absolute-position chaos

Mobile behavior (this is the key part)

On mobile, we don’t force shrinking.

Instead:

  • Timeline remains horizontal
  • User scrolls naturally (thumb-friendly)
  • Content stays readable

Bootstrap already supports this via:

<div class="timeline-wrapper overflow-auto">

This is better UX than cramming everything into a vertical mess.

Optional: stack vertically on small screens

If you want a vertical layout on mobile:

@media (max-width: 576px) {
  .timeline {
    flex-direction: column;
  }

  .timeline::before {
    display: none;
  }
}

Now you get:

  • Horizontal on desktop
  • Vertical on mobile

No JS required.

Common mistakes to avoid ❌

1. Fixed widths everywhere

Breaks responsiveness instantly.

2. Using sliders for timelines

Heavy, unnecessary, bad for accessibility.

3. Absolute positioning everything

Looks good once — breaks everywhere else.

Bootstrap + Flexbox already solved this.

When this approach is perfect

Use this timeline when:

  • Showing project phases
  • Roadmaps
  • Process steps
  • Event sequences

If you need:

  • Animations → add CSS transitions
  • Dynamic data → render items via JS

The base layout stays the same.

Final takeaway

A responsive horizontal timeline doesn’t need:

Bootstrap already gives you the tools.

Build the layout right, let scrolling do its job, and keep the CSS boring.

That’s how timelines stay responsive — and maintainable.

Responsive Horizontal Timeline using CSS

CSS Multiple Animations Complete Guide

ActionLink Razor – How To Add CSS Class

Related Articles:

Last updated on January 1, 2026