Skip to content
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.

Bootstrap class

No dedicated Bootstrap class

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 and classes

VariantDescription and classes
Vertical lineEvents listed down a single connector line.border-start border-2 ps-4 position-relative
Alternating centre lineEvents alternate left and right of a central line on desktop.row + col-md-5 / col-md-2 + order-md-*
Card per eventEach milestone sits in its own card.card border-0 shadow-sm
Date badgesYear or date shown as a badge on each event.badge text-bg-primary

Code example

HTML
<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 Northwind 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 template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

  • 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 Canvas Builder 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 Canvas Builder generate a Timeline component?
When you describe a timeline in your Canvas Builder 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.