Bulma Timeline

A versatile timeline extension for Bulma.

The Timeline extension allows you to create beautiful vertical timelines. It supports markers with icons or images, and multiple alignment options including centered and right-aligned layouts.

Basic Timeline

Standard vertical timeline with markers and content blocks. Supports colored markers and icons. 

<div class="timeline">
    <header class="timeline-header">
        <span class="tag is-medium is-link">Start</span>
    </header>
    <div class="timeline-item">
        <div class="timeline-marker"></div>
        <div class="timeline-content">
            <p class="heading">Step 1</p>
            <p>Something happened.</p>
        </div>
    </div>
</div>
History

March 2026

Uploaded a file to the server.

April 2026

Verification complete.

Done

Cerntered Layout

Use is-center for a symmetric, balanced timeline design.

Birth

January 2000

Everything began here.

May 2015

A significant milestone with an image marker.

Now 
<div class="timeline is-center">
    <!-- Items will alternate sides -->
</div>