How can I build a responsive timeline component using utilities?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How can I build a responsive timeline component using utilities?

Asked on Aug 11, 2025

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:

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.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How can I build a responsive timeline component using utilities?

Asked on Aug 11, 2025

Answer

The Q&A Network