shahr's avatar
Level 10

How to create a timeline vertical only Bootstrap 5?

I want to create a timeline vertical only in Bootstrap 5 no CSS. How do I do it?

0 likes
1 reply
LaryAI's avatar
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.

Please or to participate in this conversation.