Timeline

Display a vertical timeline, in different colors, sizes, and states

Colors Yes
Sizes No
Javascript No
Variables Yes

Default layout

Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End
<div class="timeline">
<header class="timeline-header">
<span class="tag is-medium is-primary">Start</span>
</header>
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-content">
<p class="heading">January 2016</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker is-image is-32x32">
<img src="http://bulma.io/images/placeholders/32x32.png">
</div>
<div class="timeline-content">
<p class="heading">February 2016</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-primary">2017</span>
</header>
<div class="timeline-item">
<div class="timeline-marker is-icon">
<i class="fa fa-flag"></i>
</div>
<div class="timeline-content">
<p class="heading">March 2017</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<div class="timeline-header">
<span class="tag is-medium is-primary">End</span>
</div>
</div>

Colors #

You can use color modifiers on timeline-marker to change its color

Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End
<div class="timeline">
<header class="timeline-header">
<span class="tag is-medium is-primary">Start</span>
</header>
<div class="timeline-item">
<div class="timeline-marker is-primary"></div>
<div class="timeline-content">
<p class="heading">January 2016</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker is-warning is-image is-32x32">
<img src="http://bulma.io/images/placeholders/32x32.png">
</div>
<div class="timeline-content">
<p class="heading">February 2016</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-primary">2017</span>
</header>
<div class="timeline-item">
<div class="timeline-marker is-danger is-icon">
<i class="fa fa-flag"></i>
</div>
<div class="timeline-content">
<p class="heading">March 2017</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-medium is-primary">End</span>
</header>
</div>

You can use color modifiers on timeline-item to change the line color

Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End
<div class="timeline">
<header class="timeline-header">
<span class="tag is-medium is-primary">Start</span>
</header>
<div class="timeline-item is-primary">
<div class="timeline-marker"></div>
<div class="timeline-content">
<p class="heading">January 2016</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<div class="timeline-item is-warning">
<div class="timeline-marker is-image is-32x32">
<img src="http://bulma.io/images/placeholders/32x32.png">
</div>
<div class="timeline-content">
<p class="heading">February 2016</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-primary">2017</span>
</header>
<div class="timeline-item is-danger">
<div class="timeline-marker is-icon">
<i class="fa fa-flag"></i>
</div>
<div class="timeline-content">
<p class="heading">March 2017</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-medium is-primary">End</span>
</header>
</div>

You can even use them both together

Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End
<div class="timeline">
<header class="timeline-header">
<span class="tag is-medium is-primary">Start</span>
</header>
<div class="timeline-item is-primary">
<div class="timeline-marker is-primary"></div>
<div class="timeline-content">
<p class="heading">January 2016</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<div class="timeline-item is-warning">
<div class="timeline-marker is-warning is-image is-32x32">
<img src="http://bulma.io/images/placeholders/32x32.png">
</div>
<div class="timeline-content">
<p class="heading">February 2016</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-primary">2017</span>
</header>
<div class="timeline-item is-danger">
<div class="timeline-marker is-danger is-icon">
<i class="fa fa-flag"></i>
</div>
<div class="timeline-content">
<p class="heading">March 2017</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-medium is-primary">End</span>
</header>
</div>


Positions #

You can use is-centered modifiers on timeline

Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End
<div class="timeline is-centered">
<header class="timeline-header">
<span class="tag is-medium is-primary">Start</span>
</header>
<div class="timeline-item is-primary">
<div class="timeline-marker is-primary"></div>
<div class="timeline-content">
<p class="heading">January 2016</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<div class="timeline-item is-warning">
<div class="timeline-marker is-warning is-image is-32x32">
<img src="http://bulma.io/images/placeholders/32x32.png">
</div>
<div class="timeline-content">
<p class="heading">February 2016</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-primary">2017</span>
</header>
<div class="timeline-item is-danger">
<div class="timeline-marker is-danger is-icon">
<i class="fa fa-flag"></i>
</div>
<div class="timeline-content">
<p class="heading">March 2017</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-medium is-primary">End</span>
</header>
</div>

You can use is-rtl modifiers on timeline

Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End
<div class="timeline is-rtl">
<header class="timeline-header">
<span class="tag is-medium is-primary">Start</span>
</header>
<div class="timeline-item is-primary">
<div class="timeline-marker is-primary"></div>
<div class="timeline-content">
<p class="heading">January 2016</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<div class="timeline-item is-warning">
<div class="timeline-marker is-warning is-image is-32x32">
<img src="http://bulma.io/images/placeholders/32x32.png">
</div>
<div class="timeline-content">
<p class="heading">February 2016</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-primary">2017</span>
</header>
<div class="timeline-item is-danger">
<div class="timeline-marker is-danger is-icon">
<i class="fa fa-flag"></i>
</div>
<div class="timeline-content">
<p class="heading">March 2017</p>
<p>Timeline content - Can include any HTML element</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-medium is-primary">End</span>
</header>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$timeline-marker-background-color $white
$timeline-marker-border .1em solid $grey-light
$timeline-line .1rem solid $grey-light
$timeline-content-padding 1em 0 0 2em
$timeline-icon-size $size-5
$timeline-header-width 4em
$dimensions 16 24 32 48 64 96 128