Level 58
To create a vertical timeline in Bootstrap 5, you can use the built-in flexbox utilities. Here's an example:
<div class="d-flex flex-column timeline">
<div class="timeline-item">
<h3>Event 1</h3>
<p>Event 1 description</p>
</div>
<div class="timeline-item">
<h3>Event 2</h3>
<p>Event 2 description</p>
</div>
<div class="timeline-item">
<h3>Event 3</h3>
<p>Event 3 description</p>
</div>
</div>
And the CSS:
.timeline {
margin-top: 50px;
}
.timeline-item {
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
This will create a vertical timeline with each event displayed in a box. You can customize the styling as needed.