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.
An extension for the Bulma CSS framework. See the Readme on Github for installation instructions.
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.
<ul class="steps">
<li class="steps-segment">
<a href="#" class="steps-marker"></a>
</li>
<li class="steps-segment">
<a href="#" class="steps-marker"></a>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
You can display information inside markers. About 2 or 3 characters or an icon will fit.
<ul class="steps">
<li class="steps-segment">
<span class="steps-marker">1</span>
</li>
<li class="steps-segment">
<span class="steps-marker">xyz</span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker">-3-</span>
</li>
<li class="steps-segment">
<span class="steps-marker">★</span>
</li>
<li class="steps-segment">
<span class="steps-marker">
<span class="icon">
<i class="fa fa-check"></i>
</span>
</span>
</li>
</ul>
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.
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.
<ul class="steps is-balanced">
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 1</p>
<p>This is the first step, which means you start here.</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 2</p>
<p>This is the second step. Once you complete the first step, you will end up here.</p>
</div>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 3</p>
<p>This is the third step. This is halfway between the start and the end.</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 4</p>
<p>The fourth step. Nearly there!</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 5</p>
<p>And finally the last step. You have successfully completed all 5 steps.</p>
</div>
</li>
</ul>
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.
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.
<ul class="steps has-content-centered">
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 1</p>
<p>This is the first step, which means you start here.</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 2</p>
<p>This is the second step. Once you complete the first step, you will end up here.</p>
</div>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 3</p>
<p>This is the third step. This is halfway between the start and the end.</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 4</p>
<p>The fourth step. Nearly there!</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 5</p>
<p>And finally the last step. You have successfully completed all 5 steps.</p>
</div>
</li>
</ul>
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.
Action 1
Action 2
Action 3
Action 4
<ul class="steps">
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content is-divider-content">
<p class="is-size-4">Action 1</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content is-divider-content">
<p class="is-size-4">Action 2</p>
</div>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
<div class="steps-content is-divider-content">
<p class="is-size-4">Action 3</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content is-divider-content">
<p class="is-size-4">Action 4</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
Use has-content-above modifier to move the steps above the marker.
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.
<ul class="steps is-balanced has-content-above">
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 1</p>
<p>This is the first step, which means you start here.</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 2</p>
<p>This is the second step. Once you complete the first step, you will end up here.</p>
</div>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 3</p>
<p>This is the third step. This is halfway between the start and the end.</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 4</p>
<p>The fourth step. Nearly there!</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 5</p>
<p>And finally the last step. You have successfully completed all 5 steps.</p>
</div>
</li>
</ul>
has-content-above also works with is-divider-content
Step 1
Step 2
Step 3
Step 4
Step 5
<ul class="steps has-content-above">
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content is-divider-content">
<p class="is-size-4">Step 1</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content is-divider-content">
<p class="is-size-4">Step 2</p>
</div>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
<div class="steps-content is-divider-content">
<p class="is-size-4">Step 3</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content is-divider-content">
<p class="is-size-4">Step 4</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content is-divider-content">
<p class="is-size-4">Step 5</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
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.
Step 1
Step 2
Step 3
Step 1
Step 2
Step 3
<div class="columns">
<div class="column">
<ul class="steps has-content-centered">
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 1</p>
</div>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 2</p>
</div>
<div class="extra-data">Hello, there.</div>
</li>
<li class="steps-segment ">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 3</p>
</div>
</li>
</ul>
</div>
<div class="column">
<ul class="steps has-content-centered has-content-above">
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 1</p>
</div>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 2</p>
</div>
<div class="extra-data">General Kenobi!</div>
</li>
<li class="steps-segment ">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 3</p>
</div>
</li>
</ul>
</div>
</div>
Use .has-overflow-left or .has-overflow-right to allow extra data to overflow. By default, it will center and text-wrap for you.
Step 1
Step 2
Step 3
Step 1
Step 2
Step 3
<div class="columns">
<div class="column">
<ul class="steps has-content-centered">
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 1</p>
</div>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 2</p>
</div>
<div class="extra-data has-overflow-left">
<span>This snippet overflows from step 3, and stays right-aligned.</span>
</div>
</li>
<li class="steps-segment ">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 3</p>
</div>
</li>
</ul>
</div>
<div class="column">
<ul class="steps has-content-centered">
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 1</p>
</div>
<div class="extra-data has-overflow-right">
<span>This one overflows from step 1 in the opposite direction.</span>
</div>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 2</p>
</div>
</li>
<li class="steps-segment ">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">Step 3</p>
</div>
</li>
</ul>
</div>
</div>
Every marker can have a different color. This can be used to indicate steps with errors, for example.
is-white
is-light
is-dark
is-black
<ul class="steps has-content-centered">
<li class="steps-segment">
<span class="steps-marker is-white">1</span>
<div class="steps-content">
<code>is-white</code>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker is-light">2</span>
<div class="steps-content">
<code>is-light</code>
</div>
</li>
<li class="steps-segment is-active">
<span class="steps-marker is-dark">3</span>
<div class="steps-content">
<code>is-dark</code>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker is-black">4</span>
<div class="steps-content">
<code>is-black</code>
</div>
</li>
</ul>
is-primary
is-info
is-success
is-warning
is-danger
<ul class="steps has-content-centered">
<li class="steps-segment">
<span class="steps-marker is-primary">1</span>
<div class="steps-content">
<code>is-primary</code>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker is-info">2</span>
<div class="steps-content">
<code>is-info</code>
</div>
</li>
<li class="steps-segment is-active">
<span class="steps-marker is-success">3</span>
<div class="steps-content">
<code>is-success</code>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker is-warning">4</span>
<div class="steps-content">
<code>is-warning</code>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker is-danger">5</span>
<div class="steps-content">
<code>is-danger</code>
</div>
</li>
</ul>
You can use the is-small, is-medium or is-large modifiers to change the size.
<ul class="steps is-small">...</ul>
<ul class="steps">...</ul>
<ul class="steps is-medium">...</ul>
<ul class="steps is-large">...</ul>
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.
<ul class="steps is-thin">
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
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.
<ul class="steps is-narrow">
<li class="steps-segment">
<span href="#" class="steps-marker"></span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
<ul class="steps is-narrow is-centered">
<li class="steps-segment">
<span href="#" class="steps-marker"></span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
<ul class="steps is-narrow is-right">
<li class="steps-segment">
<span href="#" class="steps-marker"></span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
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.
<ul class="steps is-vertical is-short">
<li class="steps-segment">
<span href="#" class="steps-marker"></span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
<ul class="steps is-vertical is-short is-centered">
<li class="steps-segment">
<span href="#" class="steps-marker"></span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
<ul class="steps is-vertical is-short is-bottom">
<li class="steps-segment">
<span href="#" class="steps-marker"></span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
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.
<ul class="steps is-hollow">
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
<ul class="steps">
<li class="steps-segment">
<span class="steps-marker is-hollow"></span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker is-hollow"></span>
</li>
</ul>
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
<ul class="steps is-dashed">
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
Next step unreachable
<ul class="steps">
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
<li class="steps-segment is-active is-dashed">
<span class="steps-marker"></span>
<div class="steps-content is-divider-content">
<p class="heading">Next step unreachable</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
has-gaps
<ul class="steps has-gaps">
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
<ul class="steps">
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
<li class="steps-segment is-active has-gaps">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
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.
<ul class="steps is-horizontal">
<li class="steps-segment">
<span href="#" class="steps-marker"></span>
</li>
<li class="steps-segment">
<span href="#" class="steps-marker"></span>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
</li>
</ul>
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
<ul class="steps is-vertical">
<li class="steps-segment">
<span href="#" class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">2000</p>
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</li>
<li class="steps-segment">
<span href="#" class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">2002</p>
<p>Maecenas Ultrices Aliquet Velit Vitae</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">2007</p>
<p>Aliquam Quis Scelerisque Mauris Nullam</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">2012</p>
<p>Etiam A Nunc Vitae Nunc</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-4">2017</p>
<p>In Sed Vehicula Est Vivamus</p>
</div>
</li>
</ul>
Putting things together, we can make a checkout form for a shopping website.
Shopping Cart
User Information
Payment
Confirmation
<ul class="steps is-narrow is-medium is-centered has-content-centered">
<li class="steps-segment">
<a href="#" class="has-text-dark">
<span class="steps-marker">
<span class="icon">
<i class="fa fa-shopping-cart"></i>
</span>
</span>
<div class="steps-content">
<p class="heading">Shopping Cart</p>
</div>
</a>
</li>
<li class="steps-segment">
<a href="#" class="has-text-dark">
<span class="steps-marker">
<span class="icon">
<i class="fa fa-user"></i>
</span>
</span>
<div class="steps-content">
<p class="heading">User Information</p>
</div>
</a>
</li>
<li class="steps-segment is-active has-gaps">
<span class="steps-marker">
<span class="icon">
<i class="fa fa-usd"></i>
</span>
</span>
<div class="steps-content">
<p class="heading">Payment</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker is-hollow">
<span class="icon">
<i class="fa fa-check"></i>
</span>
</span>
<div class="steps-content">
<p class="heading">Confirmation</p>
</div>
</li>
</ul>
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:
// in a .sass file
.my-step-style
+steps-active-segment
.steps-content
font-weight: bold
+steps-inactive-segments
.steps-content
color: $grey-lighter
Then using the my-step-style class on the root steps element will add the
custom styles.
Step 1
Step 2
Step 3
Step 4
Step 5
<ul class="steps my-step-style has-content-centered">
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-5">Step 1</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-5">Step 2</p>
</div>
</li>
<li class="steps-segment is-active">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-5">Step 3</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-5">Step 4</p>
</div>
</li>
<li class="steps-segment">
<span class="steps-marker"></span>
<div class="steps-content">
<p class="is-size-5">Step 5</p>
</div>
</li>
</ul>
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.
You can use these variables to customize this . Simply set one or multiple of these variables before importing Bulma. Learn how.
| Name | Default value |
|---|---|
| Name | Default value |
$steps-default-color
|
$grey-lighter
|
$steps-completed-color
|
$success
|
$steps-active-color
|
$success
|
$steps-horizontal-min-width
|
10em
|
$steps-vertical-min-height
|
4em
|
$steps-marker-size
|
2
|
$steps-divider-size
|
.4em
|
$steps-gap-size
|
.3rem
|
$steps-hollow-border-size
|
.3em
|
$steps-thin-divider-size
|
1px
|
$steps-thin-marker-size
|
.8em
|
Have an issue? Please create an issue on Github and I will look at it.