Bootstrap Timeline with Images
This Bootstrap Timeline with Images is a powerful way to present information chronologically while enhancing the overall aesthetic appeal.
Bootstrap 5 Tutorial Update
We have updated this Bootstrap tutorial to Bootstrap 5.3.3 and BSB Framework 2.0.4. We have rechecked this Bootstrap example on May 3, 2024.
Best Ready to Use Web Themes & Templates
Bootstrap Timeline with Images
The timeline structure typically includes events or milestones arranged along a horizontal or vertical axis. Each event shares a node or block, accompanied by text and often complemented by images to provide a rich and immersive narrative.
Bootstrap 5 Templates
Bootstrap One Page Templates, Bootstrap 5 Templates, Free Bootstrap Templates
You only need to add the .bsb-timeline-6
class in the parent tag. Class .bsb-timeline-6
will be available after loading the timeline-6.css
stylesheet.
<section class="bsb-timeline-6 py-5 py-xl-8">
....
</section>
Incorporating images into the Bootstrap timeline elevates storytelling capabilities by adding a visual dimension to each event. Images have the unique ability to convey emotions and information and enhance the overall aesthetic appeal of the timeline.
Features
- Bootstrap 5
- BSB Framework
- Timeline Dots
- Vertical Timeline
- Image Timeline
- HTML5 & CSS3
- W3C Valid
- Commented Code
- Responsive Layout
- Easy to Use
- Cross Browser Compatible
Tags
Bootstrap 5 Components
Bootstrap Login Forms, Bootstrap 5 Snippets, Bootstrap Cards, Bootstrap Carousels, Bootstrap Heroes, Bootstrap Footers
<!-- Timeline 6 - Bootstrap Brain Component -->
<section class="bsb-timeline-6 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 left">
<div class="timeline-body">
<div class="timeline-content">
<div class="card border-0">
<img class="card-img-top img-fluid" loading="lazy" src="./assets/img/timeline-img-1.jpg" alt="Bootstrap 5">
<div class="card-body border border-top-0 border-light-subtle">
<h2 class="card-title mb-2">Bootstrap 5</h2>
<h6 class="card-subtitle text-secondary mb-3">Active Support</h6>
<p class="card-text mb-2">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>
<p class="card-text m-0"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item right">
<div class="timeline-body">
<div class="timeline-content">
<div class="card border-0">
<img class="card-img-top img-fluid" loading="lazy" src="./assets/img/timeline-img-2.jpg" alt="Bootstrap 4">
<div class="card-body border border-top-0 border-light-subtle">
<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 mb-2">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>
<p class="card-text m-0"><small class="text-body-secondary">Last updated 2 months ago</small></p>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item left">
<div class="timeline-body">
<div class="timeline-content">
<div class="card border-0">
<img class="card-img-top img-fluid" loading="lazy" src="./assets/img/timeline-img-3.jpg" alt="Bootstrap 3">
<div class="card-body border border-top-0 border-light-subtle">
<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 mb-2">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>
<p class="card-text m-0"><small class="text-body-secondary">Last updated 1 year ago</small></p>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item right">
<div class="timeline-body">
<div class="timeline-content">
<div class="card border-0">
<img class="card-img-top img-fluid" loading="lazy" src="./assets/img/timeline-img-4.jpg" alt="Bootstrap 2">
<div class="card-body border border-top-0 border-light-subtle">
<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 mb-2">Sleek, intuitive, and powerful front-end framework for faster and easier web development. Bootstrap 2 is no longer officially supported.</p>
<p class="card-text m-0"><small class="text-body-secondary">Last updated 2 years ago</small></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-6/assets/css/timeline-6.css">
Bootstrap 5 Timeline Examples
Timelines are an engaging way to visually represent a sequence of events, project milestones, or historical narratives. With Bootstrap’s flexible components and grid system, creating visually appealing timelines becomes seamless. Let’s explore a few Bootstrap timeline examples that demonstrate the versatility and elegance of this feature.
- Use in personal projects
- Customize the template files
- Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- Free Updates
- Access to all 8 Pro Templates
- Access to all 51 Pro Components
- Use in SaaS
- Resell & Redistribute
BB Startup
Freelancer
$49
3 Months Access
8 Pro BS Templates
51 Pro BS Components
- Use in personal projects
- Customize the template files
- Unlimited Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- 3 Months Free Updates
- Access to all our 8 Pro Templates
- Access to all our 51 Pro Components
-
Use in SaaS -
Resell & Redistribute
BB Club
Agency
$149
12 Months Access
8 Pro BS Templates
51 Pro BS Components
- Use in personal projects
- Customize the template files
- Unlimited Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- 12 Months Free Updates
- Access to all our 8 Pro Templates
- Access to all our 51 Pro Components
- Use in SaaS
-
Resell & Redistribute