Documentation

This site gathers documentation of my GitHub projects

Timeline

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

Colors Yes
Sizes No
Variables Yes

  • 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
<ul class="timeline">
  <li class="timeline-header">
    <span class="tag is-medium is-primary">Start</span>
  </li>
  <li 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>
  </li>
  <li 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>
  </li>
  <li class="timeline-header">
    <span class="tag is-primary">2017</span>
  </li>
  <li 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>
  </li>
  <li class="timeline-header">
    <span class="tag is-medium is-primary">End</span>
  </li>
</ul>

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
<ul class="timeline">
  <li class="timeline-header">
    <span class="tag is-medium is-primary">Start</span>
  </li>
  <li 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>
  </li>
  <li 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>
  </li>
  <li class="timeline-header">
    <span class="tag is-primary">2017</span>
  </li>
  <li 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>
  </li>
  <li class="timeline-header">
    <span class="tag is-medium is-primary">End</span>
  </li>
</ul>

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
<ul class="timeline">
  <li class="timeline-header">
    <span class="tag is-medium is-primary">Start</span>
  </li>
  <li 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>
  </li>
  <li 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>
  </li>
  <li class="timeline-header">
    <span class="tag is-primary">2017</span>
  </li>
  <li 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>
  </li>
  <li class="timeline-header">
    <span class="tag is-medium is-primary">End</span>
  </li>
</ul>

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
<ul class="timeline">
  <li class="timeline-header">
    <span class="tag is-medium is-primary">Start</span>
  </li>
  <li 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>
  </li>
  <li 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>
  </li>
  <li class="timeline-header">
    <span class="tag is-primary">2017</span>
  </li>
  <li 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>
  </li>
  <li class="timeline-header">
    <span class="tag is-medium is-primary">End</span>
  </li>
</ul>

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

This page is designed with Bulma CSS framework.