Create a Vertical Left-Right Timeline Using Bootstrap

🕒 How to Create a Vertical Left-Right Timeline Using Bootstrap and Sass

In today's web design landscape, timelines are not just for project management tools—they’re a powerful way to visually represent progress, history, or workflows on a website. In this article, we'll show you how to build a responsive vertical left-right timeline using HTML, Bootstrap, and Sass, ideal for portfolios, resumes, or company histories.

✅ Why Use a Timeline Layout?

A timeline layout helps present information in a clean, structured way. Whether you're showcasing:

A product development journey
Your career achievements
Or your company milestones

…timelines provide a storytelling format that’s easy to follow and visually appealing.

🧱 Technologies Used

HTML5: For the semantic structure
Bootstrap 4/5: For responsive grid layout
Sass (SCSS): For modular and maintainable styles
CSS3: For custom visual design and transitions

📐 Layout Overview

The timeline alternates content on the left and right, with circular nodes in the middle connected by lines. Each timeline block is composed of:

A circle to represent a milestone or step
A description area for text content
A connector line that links one event to the next

💻 Code Breakdown

HTML Structure

We use Bootstrap's grid system (.row, .col-2, .col-6, etc.) to align content and the vertical timeline:

<div class="row align-items-center how-it-works">
  <div class="col-2 text-center bottom">
    <div class="circle">1</div>
  </div>
  <div class="col-6">
    <h5>Fully Responsive</h5>
    <p>This timeline layout adjusts seamlessly across all screen sizes using Bootstrap’s grid system.</p>
  </div>
</div>

Each row alternates sides by simply reversing the column order.

Timeline Connectors

Lines between timeline steps are created with:

<div class="row timeline">
  <div class="col-2"><div class="corner top-right"></div></div>
  <div class="col-8"><hr></div>
  <div class="col-2"><div class="corner left-bottom"></div></div>
</div>

Custom .corner and hr classes are styled using Sass to form seamless connectors.

🎨 Styling with Sass

Sass makes the CSS maintainable and clean. Key variables:

$bg: #4D4545;
$color: #ED8D8D;
$font-stack: 'Lato', sans-serif;

These are used across elements for consistent theme and easy customization.

Example circle style:

.circle {
  font-weight: bold;
  padding: 15px 20px;
  border-radius: 50%;
  background-color: $color;
  color: $bg;
}

And timeline connectors:

.timeline hr {
  border-top: 3px solid $color;
  position: relative;
  top: 17px;
}

📱 Fully Responsive Design

Thanks to Bootstrap’s grid system, this timeline works well on all screen sizes. You can also customize breakpoints or add media queries for more complex behavior.

🚀 SEO Benefits

A well-structured timeline like this helps with:

User experience (UX): Easy navigation and engagement
Time on page: Keeps users reading
Semantic HTML: Better crawlability by search engines

Use heading tags (<h2>, <h5>) properly, and ensure the timeline content includes keywords and structured information about your business or project.

webotg