Bootstrap Timeline with Dots and Icons
-
05 May 2021
Bootstrap 5
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.
-
18 Jan 2018
Bootstrap 4
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.
-
19 Aug 2013
Bootstrap 3
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.
-
31 Jan 2012
Bootstrap 2
Sleek, intuitive, and powerful front-end framework for faster and easier web development. Bootstrap 2 is no longer officially supported.
<!-- Timeline 5 - Bootstrap Brain Component -->
<section class="bsb-timeline-5 py-5 py-xl-8">
<div class="container">
<div class="row justify-content-center">
<div class="col-10 col-md-8 col-xl-6">
<ul class="timeline">
<li class="timeline-item">
<span class="timeline-icon">
<i class="bi-check-lg text-primary"></i>
</span>
<div class="timeline-body">
<div class="timeline-content">
<div class="card text-bg-primary">
<div class="card-header">05 May 2021</div>
<div class="card-body">
<h5 class="card-title">Bootstrap 5</h5>
<p class="card-text">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">
<span class="timeline-icon">
<i class="bi-info-lg text-primary"></i>
</span>
<div class="timeline-body">
<div class="timeline-content">
<div class="card text-bg-primary">
<div class="card-header">18 Jan 2018</div>
<div class="card-body">
<h5 class="card-title">Bootstrap 4</h5>
<p class="card-text">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">
<span class="timeline-icon">
<i class="bi-question-lg text-primary"></i>
</span>
<div class="timeline-body">
<div class="timeline-content">
<div class="card text-bg-primary">
<div class="card-header">19 Aug 2013</div>
<div class="card-body">
<h5 class="card-title">Bootstrap 3</h5>
<p class="card-text">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">
<span class="timeline-icon">
<i class="bi-exclamation-lg text-primary"></i>
</span>
<div class="timeline-body">
<div class="timeline-content">
<div class="card text-bg-primary">
<div class="card-header">31 Jan 2012</div>
<div class="card-body">
<h5 class="card-title">Bootstrap 2</h5>
<p class="card-text">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://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/tutorials/timelines/timeline-5/assets/css/timeline-5.css">
This Bootstrap Timeline has a modern interface with icons. Bootstrap Timeline dots represent the timeline event. This Bootstrap Timeline example uses Bootstrap Cards so that you can customize the Timeline content easily.