Bootstrap 5Content

Bootstrap 5 Timeline

A Timeline component in Bootstrap 5 is a vertically or horizontally arranged sequence of events, milestones, or steps displayed in chronological order. It typically combines a connector line, icon markers, and content cards to give users a clear sense of progression. Use it for project histories, company milestones, onboarding flows, or any content where sequence and time matter.

Primary Class

.timeline

Common Use Cases

→Displaying a startup's founding history — seed round, product launch, first 1,000 users, Series A — on an About page
→Showing the stages of a client onboarding process (Sign Up → Briefing Call → Design Review → Go Live) on a services page
→Presenting a software product's changelog or version release history so users can scan what changed and when
→Outlining a legal or compliance process with dated steps, such as GDPR audit stages or contract approval workflows

Variants & Classes

Variant	Description	Classes
Timeline Default	Standard timeline with Bootstrap's default styling.	`timeline`
Timeline Responsive	Responsive variant that adapts to different screen sizes.	`timeline timeline-responsive`

Code Example

<section class="py-5">
  <div class="container">
    <h2 class="mb-5 text-center">Company Milestones</h2>
    <div class="timeline position-relative">

      <!-- Vertical connector line -->
      <div class="position-absolute top-0 bottom-0 start-50 translate-middle-x" style="width: 2px; background-color: #dee2e6;"></div>

      <!-- Event 1 -->
      <div class="row mb-5 align-items-center">
        <div class="col-md-5 text-md-end pe-md-4">
          <div class="card shadow-sm border-0">
            <div class="card-body">
              <h5 class="card-title mb-1">Founded in Berlin</h5>
              <p class="card-text text-muted small">Three developers quit their agency jobs and started CanvasBuilder from a shared apartment in Mitte.</p>
            </div>
          </div>
        </div>
        <div class="col-md-2 d-flex justify-content-center">
          <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; z-index: 1;">
            <span class="fw-bold small">2019</span>
          </div>
        </div>
        <div class="col-md-5 ps-md-4 mt-3 mt-md-0">
          <!-- Empty on alternating layout -->
        </div>
      </div>

      <!-- Event 2 -->
      <div class="row mb-5 align-items-center">
        <div class="col-md-5 text-md-end pe-md-4 order-md-1">
          <!-- Empty on alternating layout -->
        </div>
        <div class="col-md-2 d-flex justify-content-center order-md-2">
          <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; z-index: 1;">
            <span class="fw-bold small">2021</span>
          </div>
        </div>
        <div class="col-md-5 ps-md-4 mt-3 mt-md-0 order-md-3">
          <div class="card shadow-sm border-0">
            <div class="card-body">
              <h5 class="card-title mb-1">10,000 Sites Built</h5>
              <p class="card-text text-muted small">Passed the 10k milestone two years after launch, with users across 40 countries generating live websites in under 60 seconds.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Event 3 -->
      <div class="row align-items-center">
        <div class="col-md-5 text-md-end pe-md-4">
          <div class="card shadow-sm border-0">
            <div class="card-body">
              <h5 class="card-title mb-1">Series A Closed</h5>
              <p class="card-text text-muted small">Raised €4.2M to expand the template library, add team collaboration features, and open a second office in Lisbon.</p>
            </div>
          </div>
        </div>
        <div class="col-md-2 d-flex justify-content-center">
          <div class="rounded-circle bg-warning text-dark d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; z-index: 1;">
            <span class="fw-bold small">2023</span>
          </div>
        </div>
        <div class="col-md-5 ps-md-4 mt-3 mt-md-0"></div>
      </div>

    </div>
  </div>
</section>

Live Examples

Basic Timeline

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated timeline with custom colours
✓Timeline with interactive states
✓Responsive timeline for all screen sizes

Best Practices

Use z-index on marker circles to prevent the connector line overlapping them

The vertical connector line is an absolutely positioned element, so any inline marker dot or circle needs `z-index: 1` (or the Bootstrap utility `position-relative`) to render on top of it — otherwise the line will cut through your icons visually.

Collapse to a single-column layout on mobile by removing the alternating offset

On small screens, alternating left-right cards create confusion. Use `col-12` as the base column width and override with `col-md-5` so the timeline stacks vertically on mobile and only fans out into the two-column alternating pattern at the `md` breakpoint and above.

Use contextual colour classes on markers to encode meaning

Applying `bg-success` for completed milestones, `bg-primary` for current events, and `bg-secondary` for upcoming steps gives users an immediate visual reading of status without needing a legend.

Keep card content concise — max two sentences per event

Timeline cards are scanned, not read. If an event needs more detail, link out to a full case study or modal rather than expanding the card inline, which breaks the visual rhythm of the timeline.

FAQ

Does Bootstrap 5 include a built-in Timeline component?

No — Bootstrap 5 does not ship a Timeline component out of the box. It is a composite pattern built from Bootstrap's existing utilities: the grid system for layout, `position-relative` and `position-absolute` for the connector line, `rounded-circle` for markers, and `card` for event content. The Canvas HTML template used by CanvasBuilder extends Bootstrap with a pre-styled `.timeline` pattern so you don't have to construct it from scratch every time.

How do I change the connector line colour or width to match my brand?

The connector line is typically a plain `div` with an inline style or a custom CSS rule. Target it with a custom class like `.timeline-line` and set `background-color` to your brand colour variable — for example `background-color: var(--bs-primary)` if you've overridden Bootstrap's primary colour in your Sass variables or `:root` block. For width, adjust the inline `width` value or set it in your stylesheet. Avoid using Bootstrap border utilities for the line itself, as they don't stretch reliably across dynamic content heights.

How does CanvasBuilder generate a Timeline component?

When you describe a timeline in your CanvasBuilder prompt — for example, 'add a company history timeline with four milestones' — the AI outputs a fully structured HTML block using the Canvas template's timeline pattern. It automatically applies your project's brand colours to the marker circles, uses Bootstrap's responsive grid so the layout collapses correctly on mobile, and populates realistic placeholder content based on your context. You can then edit the generated HTML directly in the Canvas editor or re-prompt to adjust the number of events, colours, or layout style.