→ Tane Mahuta
→ Responsive Timeline

Responsive Timeline

This bootstrap css example is contributed by Tane Mahuta, on 17-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Roadmap, Changelog

Tags: Timeline

Author Tane Mahuta

4.6k

v.5.3

Fork Fullscreen

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container py-5">
  <h2 class="text-center mb-5">Company Timeline</h2>
  
  <div class="main-timeline">
    <div class="timeline left">
      <div class="card">
        <div class="card-body p-4">
          <h3>2023</h3>
          <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare.</p>
        </div>
      </div>
    </div>
    <div class="timeline right">
      <div class="card">
        <div class="card-body p-4">
          <h3>2022</h3>
          <p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
      </div>
    </div>
    <div class="timeline left">
      <div class="card">
        <div class="card-body p-4">
          <h3>2021</h3>
          <p class="mb-0">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
        </div>
      </div>
    </div>
    <div class="timeline right">
      <div class="card">
        <div class="card-body p-4">
          <h3>2020</h3>
          <p class="mb-0">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
        </div>
      </div>
    </div>
  </div>
</div>

More Examples

Clean Timeline Changelog
clean and beautiful changelog example

Author:
Alaric Sloane

2 years ago

3.6k

v.5.3
Copy Code Section
Code block with working copy option

Author:
Kemaya m

2 years ago

4.2k

v.5.3
skill info

Author:
Gana JNsksk

5 months ago

428

v.4.6
Simple hero section

Author:
Mateo Rojas

1 year ago

8.1k

v.5.3
portfoilo page

Author:
Ad Apon7

5 months ago

420

v.5.3
Restaurant Home Page

Author:
Creative Araf

3 months ago

272

v.5.3
Call-to-Action Example
Call-to-Action section with bootstrap 5

Author:
Omar Khaled

2 years ago

2.1k

v.5.3
faq section
copy koiro na

Author:
Fitar Ahmed

5 months ago

973

v.4.6
contact page

Author:
Md. Hasibur Rahman

4 months ago

369

v.5.3
Animated Skills Progress Chart

Author:
Reza Farhadi

2 years ago

5.9k

v.5.3
Product Card
A product card layout for an e-commerce website with an image at the top

Author:
Juan Martinez

2 years ago

21.3k

v.5.3
Floating Card-Style Pagination

Author:
Levi Treadwell

1 year ago

3.6k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent

BootstrapExamples From the makers of tailwindflex.com

BootstrapExamples is a free library offering a diverse range of Bootstrap CSS components. Developed by the community, it's open for anyone to use.

Contacts

Email:

[email protected]

Links

Search

Resources

Free Tailwind CSS Components Free CSS Components

© 2026 BootstrapExamples. All Rights Reserved.

v1.3