Bootstrap Timeline Example
-
Bootstrap 5
Active Support
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
-
Bootstrap 4
No Active Support
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. Bootstrap 4 has no active support.
-
Bootstrap 3
No Active Support
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap 3 has no active support.
-
Bootstrap 2
No Active Support
Sleek, intuitive, and powerful front-end framework for faster and easier web development. Bootstrap 2 is no longer officially supported.
<!-- Timeline 7 - Bootstrap Brain Component -->
<section class="bsb-timeline-7 bg-light py-3 py-md-5 py-xl-8">
<div class="container">
<div class="row justify-content-center">
<div class="col-10 col-md-12 col-xl-10 col-xxl-9">
<ul class="timeline">
<li class="timeline-item">
<div class="timeline-body">
<div class="timeline-meta">
<div class="d-inline-flex flex-column px-2 py-1 text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 text-md-end">
<span class="fw-bold">2021 - Present</span>
<span>Latest Version: 5.3.1</span>
</div>
</div>
<div class="timeline-content timeline-indicator">
<div class="card border-0 shadow">
<div class="card-body p-xl-4">
<h2 class="card-title mb-2">Bootstrap 5</h2>
<h6 class="card-subtitle text-secondary mb-3">Active Support</h6>
<p class="card-text m-0">Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.</p>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-body">
<div class="timeline-meta">
<div class="d-inline-flex flex-column px-2 py-1 text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 text-md-end">
<span class="fw-bold">2018 - 2023</span>
<span>Latest Version: 4.6.2</span>
</div>
</div>
<div class="timeline-content timeline-indicator">
<div class="card border-0 shadow">
<div class="card-body p-xl-4">
<h2 class="card-title mb-2">Bootstrap 4</h2>
<h6 class="card-subtitle text-secondary mb-3">No Active Support</h6>
<p class="card-text m-0">Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. Bootstrap 4 has no active support.</p>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-body">
<div class="timeline-meta">
<div class="d-inline-flex flex-column px-2 py-1 text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 text-md-end">
<span class="fw-bold">2013 - 2019</span>
<span>Latest Version: 3.4.1</span>
</div>
</div>
<div class="timeline-content timeline-indicator">
<div class="card border-0 shadow">
<div class="card-body p-xl-4">
<h2 class="card-title mb-2">Bootstrap 3</h2>
<h6 class="card-subtitle text-secondary mb-3">No Active Support</h6>
<p class="card-text m-0">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap 3 has no active support.</p>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-body">
<div class="timeline-meta">
<div class="d-inline-flex flex-column px-2 py-1 text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 text-md-end">
<span class="fw-bold">2012 - 2013</span>
<span>Latest Version: 2.3.2</span>
</div>
</div>
<div class="timeline-content timeline-indicator">
<div class="card border-0 shadow">
<div class="card-body p-xl-4">
<h2 class="card-title mb-2">Bootstrap 2</h2>
<h6 class="card-subtitle text-secondary mb-3">No Active Support</h6>
<p class="card-text m-0">Sleek, intuitive, and powerful front-end framework for faster and easier web development. Bootstrap 2 is no longer officially supported.</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/tutorials/timelines/timeline-7/assets/css/timeline-7.css">
This Bootstrap Timeline example has a clean and modern interface. This Bootstrap Timeline has timeline events connected with dots. Every Bootstrap Timeline card has an arrow pointing toward the timeline dot. This Bootstrap Timeline has a responsive layout.