--- layout: default variables: - name: $steps-default-color value: $grey-lighter - name: $steps-completed-color value: $success - name: $steps-active-color value: $success - name: $steps-horizontal-min-width value: 10em - name: $steps-vertical-min-height value: 4em - name: $steps-marker-size value: 2 - name: $steps-divider-size value: .4em - name: $steps-gap-size value: .3rem - name: $steps-hollow-border-size value: .3em - name: $steps-thin-divider-size value: 1px - name: $steps-thin-marker-size value: .8em ---

Installation

An extension for the Bulma CSS framework. See the Readme on Github for installation instructions.

{% include meta.html colors=true sizes=true variables=true %} {% include anchor.html name="Documentation" %}

The steps list is useful for tracking progress in multi steps forms or wizards.

You can use the is-active modifier to set the current active step. Any step before or after the active step will be styled differently.

{% capture steps_example %}

{% endcapture %}

        {% highlight html %}
        {{steps_example}}
        {% endhighlight %}
      

{% include anchor.html name="Marker Content" %}

You can display information inside markers. About 2 or 3 characters or an icon will fit.

{% capture steps_marker_content_example %}

{% endcapture %}

      {% highlight html %}
      {{steps_marker_content_example}}
      {% endhighlight %}
      

{% include anchor.html name="Step Content" %}

Use the steps-content class to add content to a steps-segment.

If the last step also has content, use the is-balanced modifier on the root steps element, to make sure that the last step has the same width as the other steps.

{% capture steps_content_example %}

Step 1

This is the first step, which means you start here.
Step 2

This is the second step. Once you complete the first step, you will end up here.
Step 3

This is the third step. This is halfway between the start and the end.
Step 4

The fourth step. Nearly there!
Step 5

And finally the last step. You have successfully completed all 5 steps.

{% endcapture %}

      {% highlight html %}
      {{steps_content_example}}
      {% endhighlight %}
      

Use the has-content-centered class to align the content directly underneath the marker.

You can omit the is-balanced modifier, since has-content-centered will make sure the steps are always balanced.

{% capture steps_centered_content_example %}

Step 1

This is the first step, which means you start here.
Step 2

This is the second step. Once you complete the first step, you will end up here.
Step 3

This is the third step. This is halfway between the start and the end.
Step 4

The fourth step. Nearly there!
Step 5

And finally the last step. You have successfully completed all 5 steps.

{% endcapture %}

        {% highlight html %}
        {{steps_centered_content_example}}
        {% endhighlight %}
        

Use the is-divider-content modifier to align content with the divider.

If the last step has no content, omit the is-balanced modifier on the root element to make sure the last step stays flush with the right edge.

{% capture steps_divider_content_example %}

Action 1
Action 2
Action 3
Action 4

{% endcapture %}

      {% highlight html %}
      {{steps_divider_content_example}}
      {% endhighlight %}
      

Use has-content-above modifier to move the steps above the marker.

{% capture steps_content_above_example %}

Step 1

This is the first step, which means you start here.
Step 2

This is the second step. Once you complete the first step, you will end up here.
Step 3

This is the third step. This is halfway between the start and the end.
Step 4

The fourth step. Nearly there!
Step 5

And finally the last step. You have successfully completed all 5 steps.

{% endcapture %}

      {% highlight html %}
      {{steps_content_above_example}}
      {% endhighlight %}
      

has-content-above also works with is-divider-content

{% capture steps_content_above_divider_example %}

Step 1
Step 2
Step 3
Step 4
Step 5

{% endcapture %}

          {% highlight html %}
          {{steps_content_above_divider_example}}
          {% endhighlight %}
          

Add a sibling to .steps-content with the class of .extra-data to create between-steps data. It works with .has-content-above as well.

Be aware that it is floating and therefore does not occupy space within the DOM. Add margins above and below as needed.

{% capture steps_extra_data_example %}

Step 1
Step 2

Hello, there.
Step 3

Step 1
Step 2

General Kenobi!
Step 3

{% endcapture %}

            {% highlight html %}
            {{steps_extra_data_example}}
            {% endhighlight %}
            

Use .has-overflow-left or .has-overflow-right to allow extra data to overflow. By default, it will center and text-wrap for you.

{% capture steps_extra_data_overflow_example %}

Step 1
Step 2

This snippet overflows from step 3, and stays right-aligned.
Step 3

Step 1

This one overflows from step 1 in the opposite direction.
Step 2
Step 3

{% endcapture %}

            {% highlight html %}
            {{steps_extra_data_overflow_example}}
            {% endhighlight %}
            

{% include anchor.html name="Colors" %}

Every marker can have a different color. This can be used to indicate steps with errors, for example.

{% capture steps_marker_colors1_example %}

1
is-white
2
is-light
3
is-dark
4
is-black

{% endcapture %} {% capture steps_marker_colors2_example %}

1
is-primary
2
is-info
3
is-success
4
is-warning
5
is-danger

{% endcapture %}

          {% highlight html %}
          {{steps_marker_colors1_example}}
          {% endhighlight %}
          

          {% highlight html %}
          {{steps_marker_colors2_example}}
          {% endhighlight %}
          

{% include anchor.html name="Sizes" %}

You can use the is-small, is-medium or is-large modifiers to change the size.

{% capture steps_sizes_example %}

{% endcapture %} {% capture steps_sizes_short_example %}

...

... {% endcapture %}

      {% highlight html %}
      {{steps_sizes_short_example}}
      {% endhighlight %}
      

Or if you want to go really small, use the is-thin modifier to have 1px wide dividers. The markers will also be made smaller, so you can't put anything inside them anymore.

{% capture steps_thin_example %}

{% endcapture %}

      {% highlight html %}
      {{steps_thin_example}}
      {% endhighlight %}
      

{% include anchor.html name="Narrow" %}

By default, the steps component will take up the entire width. Add the is-narrow modifier to only take up as much space as needed.

You can combine that with the is-centered or is-right modifiers to change the alignment.

{% capture steps_narrow_example %}

{% endcapture %}

      {% highlight html %}
      {{steps_narrow_example}}
      {% endhighlight %}
      

{% include anchor.html name="Short" %}

By default, the steps component with is-vertical modifier will take up the entire height. Add the is-short modifier to only take up as much space as needed.

You can combine that with the is-centered or is-right modifiers to change the alignment.

{% capture steps_is-short_example %}

{% endcapture %}

      {% highlight html %}
      {{steps_is-short_example}}
      {% endhighlight %}
      

{% include anchor.html name="Marker Style" %}

The marker can be styled using the is-hollow modifier. It can apply to all steps by defining it on the root steps element or each marker separately.

{% capture steps_hollow_example %}

{% endcapture %} {% capture steps_hollow_mixed_example %}

{% endcapture %}

For all steps

          {% highlight html %}
          {{steps_hollow_example}}
          {% endhighlight %}
          

Per step

          {% highlight html %}
          {{steps_hollow_mixed_example}}
          {% endhighlight %}
          

{% include anchor.html name="Divider Styles" %}

The divider can be styled using the is-dashed modifier, has-gaps modifier or both. They can apply to all steps by defining it on the root steps element or each step separately.

`is-dashed`

{% capture steps_dashed_example %}

{% endcapture %} {% capture steps_dashed_mixed_example %}

Next step unreachable

{% endcapture %}

For all steps

          {% highlight html %}
          {{steps_dashed_example}}
          {% endhighlight %}
          

Per step

          {% highlight html %}
          {{steps_dashed_mixed_example}}
          {% endhighlight %}
          

`has-gaps`

{% capture steps_gaps_example %}

{% endcapture %} {% capture steps_gaps_mixed_example %}

{% endcapture %}

For all steps

          {% highlight html %}
          {{steps_gaps_example}}
          {% endhighlight %}
          

Per step

          {% highlight html %}
          {{steps_gaps_mixed_example}}
          {% endhighlight %}
          

{% include anchor.html name="Alignment" %}

The steps are displayed vertically on mobile and horizontally on bigger sizes by default.

You can use the is-horizontal or is-vertical modifiers to always force the steps in a certain alignment no matter the screen size.

{% capture steps_horizontal_example %}

{% endcapture %} {% capture steps_vertical_example %}

2000

Lorem Ipsum Dolor Sit Amet
2002

Maecenas Ultrices Aliquet Velit Vitae
2007

Aliquam Quis Scelerisque Mauris Nullam
2012

Etiam A Nunc Vitae Nunc
2017

In Sed Vehicula Est Vivamus

{% endcapture %}

Always horizontal

      {% highlight html %}
      {{steps_horizontal_example}}
      {% endhighlight %}
      

Always vertical

        {% highlight html %}
        {{steps_vertical_example}}
        {% endhighlight %}
      

{% include anchor.html name="Example" %}

Putting things together, we can make a checkout form for a shopping website.

{% capture steps_checkout_example %}

Shopping Cart
User Information
Payment
Confirmation

{% endcapture %}

      {% highlight html %}
      {{steps_checkout_example}}
      {% endhighlight %}
      

{% include anchor.html name="SASS Mixin Helpers" %}

There are a few helpers available to make it easy to directly target step segments if you want to create custom step styles. They are steps-all-segments, steps-inactive-segments and steps-active-segment.

For example, if you create a my-step-style class in a .sass file like this:

{% highlight sass %} // in a .sass file .my-step-style +steps-active-segment .steps-content font-weight: bold +steps-inactive-segments .steps-content color: $grey-lighter {% endhighlight %}

Then using the my-step-style class on the root steps element will add the custom styles.

{% capture steps_custom_example %}

Step 1
Step 2
Step 3
Step 4
Step 5

{% endcapture %}

      {% highlight html %}
      {{steps_custom_example}}
      {% endhighlight %}
      

There is no steps-completed-segments mixin available, due to the way the code is structured (and css3 limitations). If you want to target those, use the steps-all-segments mixin to set that style and override it with the steps-active-segment and steps-inactive-segments mixins.

{% include variables.html variables=variables %} {% include anchor.html name="Problems?" %}

Have an issue? Please create an issue on Github and I will look at it.