How can I build a responsive timeline component using utilities?
Asked on Aug 22, 2025
1 Answer
Creating a responsive timeline component in Bootstrap 5 involves using the grid system and utility classes to ensure it adapts to various screen sizes. Here's a simple example to get you started.
<!-- BEGIN COPY / PASTE -->
<div class="container">
<div class="row">
<div class="col-12 col-md-6 mb-4">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<span class="badge bg-primary rounded-pill">1</span>
</div>
<div class="flex-grow-1 ms-3">
<h5>Event Title</h5>
<p class="mb-0">Description of the event goes here.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-4">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<span class="badge bg-primary rounded-pill">2</span>
</div>
<div class="flex-grow-1 ms-3">
<h5>Event Title</h5>
<p class="mb-0">Description of the event goes here.</p>
</div>
</div>
</div>
<!-- Repeat similar blocks for more timeline events -->
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The timeline uses Bootstrap's grid system to create a responsive layout.
- Each event is wrapped in a `d-flex` container for alignment.
- The `badge` component is used to number the events.
- Adjust the `col-12 col-md-6` classes to change the number of columns on different screen sizes.
- You can customize the colors and spacing using additional utility classes as needed.