Documentation

Everything you need to start with Bulma-extensions.

Steps

Display steps for a process (like sign-up or an order form) with different colors, sizes, and states

View on Github
NPM Package 2.2.1
Colors Yes
Sizes Yes
Javascript Yes
Variables Yes

Step 1

This is the first step of the process.

Step 2

This is the second step. You get here once you have completed the first step.

3

Step 3

This is the third step. One more step before the end.

Step 4

Final step. You have completed all the previous steps and end the process.

<div class="steps">
  <div class="step-item is-completed is-success">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-check"></i>
      </span>
    </div>
    <div class="step-details">
      <p class="step-title">Step 1</p>
      <p>This is the first step of the process.</p>
    </div>
  </div>
  <div class="step-item is-active">
    <div class="step-marker"></div>
    <div class="step-details">
      <p class="step-title">Step 2</p>
      <p>This is the second step. You get here once you have completed the first step.</p>
    </div>
  </div>
  <div class="step-item">
    <div class="step-marker">3</div>
    <div class="step-details">
      <p class="step-title">Step 3</p>
      <p>This is the third step. One more step before the end.</p>
    </div>
  </div>
  <div class="step-item">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
    <div class="step-details">
      <p class="step-title">Step 4</p>
      <p>Final step. You have completed all the previous steps and end the process.</p>
    </div>
  </div>
</div>

Colors #

  • Step 1

    This is the first step of the process.

  • Step 2

    This is the second step. You get here once you have completed the first step.

  • 3

    Step 3

    This is the third step. One more step before the end.

  • Step 4

    Final step. You have completed all the previous steps and end the process.

<ul class="steps">
  <li class="step-item is-completed is-success">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-check"></i>
      </span>
    </div>
    <div class="step-details is-primary is-completed">
      <p class="step-title">Step 1</p>
      <p>This is the first step of the process.</p>
    </div>
  </li>
  <li class="step-item is-info is-completed">
    <div class="step-marker"></div>
    <div class="step-details">
      <p class="step-title">Step 2</p>
      <p>This is the second step. You get here once you have completed the first step.</p>
    </div>
  </li>
  <li class="step-item is-warning is-completed">
    <div class="step-marker">3</div>
    <div class="step-details">
      <p class="step-title">Step 3</p>
      <p>This is the third step. One more step before the end.</p>
    </div>
  </li>
  <li class="step-item is-danger is-active">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
    <div class="step-details">
      <p class="step-title">Step 4</p>
      <p>Final step. You have completed all the previous steps and end the process.</p>
    </div>
  </li>
</ul>

Sizes #

  • 3
  • 3
  • 3
  • 3
<ul class="steps is-small">
  <li class="step-item is-completed">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-check"></i>
      </span>
    </div>
  </li>
  <li class="step-item is-active">
    <div class="step-marker"></div>
  </li>
  <li class="step-item">
    <div class="step-marker">3</div>
  </li>
  <li class="step-item">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
  </li>
</ul>

<ul class="steps">
  <li class="step-item is-completed">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-check"></i>
      </span>
    </div>
  </li>
  <li class="step-item is-active">
    <div class="step-marker"></div>
  </li>
  <li class="step-item">
    <div class="step-marker">3</div>
  </li>
  <li class="step-item">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
  </li>
</ul>

<ul class="steps is-medium">
  <li class="step-item is-completed">
    <div class="step-marker"></div>
  </li>
  <li class="step-item is-active">
    <div class="step-marker"></div>
  </li>
  <li class="step-item">
    <div class="step-marker">3</div>
  </li>
  <li class="step-item">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
  </li>
</ul>

<ul class="steps is-large">
  <li class="step-item is-completed">
    <div class="step-marker"></div>
  </li>
  <li class="step-item is-active">
    <div class="step-marker"></div>
  </li>
  <li class="step-item">
    <div class="step-marker">3</div>
  </li>
  <li class="step-item">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
  </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
$steps-maker-default-color $grey-light
$steps-marker-default-border .2em solid
$steps-default-color $grey-lighter
$steps-completed-color $primary
$steps-active-color $primary
$steps-divider-height .2em

Javascript #

Javascript

The extension comes with a JavaScript implementation which manage steps navigation.

1

Account

2

Profile

3

Social

4

Finish

Your account is now created!

Previous
Next 
<div class="steps" id="stepsDemo">
  <div class="step-item is-active is-success">
    <div class="step-marker">1</div>
    <div class="step-details">
      <p class="step-title">Account</p>
    </div>
  </div>
  <div class="step-item">
    <div class="step-marker">2</div>
    <div class="step-details">
      <p class="step-title">Profile</p>
    </div>
  </div>
  <div class="step-item">
    <div class="step-marker">3</div>
    <div class="step-details">
      <p class="step-title">Social</p>
    </div>
  </div>
  <div class="step-item">
    <div class="step-marker">4</div>
    <div class="step-details">
      <p class="step-title">Finish</p>
    </div>
  </div>
  <div class="steps-content">
    <div class="step-content has-text-centered is-active">
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Username</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <input class="input" name="username" id="username" type="text" placeholder="Username" autofocus data-validate="require">
            </div>
          </div>
        </div>
      </div>
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Password</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control has-icon has-icon-right">
              <input class="input" type="password" name="password" id="password" placeholder="Password" data-validate="require">
            </div>
          </div>
        </div>
      </div>
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Confirm password</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control has-icon has-icon-right">
              <input class="input" type="password" name="password_confirm" id="password_confirm" placeholder="Confirm password" data-validate="require">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="step-content has-text-centered">
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Firstname</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <input class="input" name="firstname" id="firstname" type="text" placeholder="Firstname" autofocus data-validate="require">
            </div>
          </div>
        </div>
      </div>
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Last name</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control has-icon has-icon-right">
              <input class="input" type="text" name="lastname" id="lastname" placeholder="Last name" data-validate="require">
            </div>
          </div>
        </div>
      </div>
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Email</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control has-icon has-icon-right">
              <input class="input" type="email" name="email" id="email" placeholder="Email" data-validate="require">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="step-content has-text-centered">
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Facebook account</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <input class="input" name="facebook" id="facebook" type="text" placeholder="Facebook account url" autofocus data-validate="require">
            </div>
          </div>
        </div>
      </div>
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Twitter account</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <input class="input" name="twitter" id="twitter" type="text" placeholder="Twitter account url" autofocus data-validate="require">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="step-content has-text-centered">
      <h1 class="title is-4">Your account is now created!</h1>
    </div>
  </div>
  <div class="steps-actions">
    <div class="steps-action">
      <a href="#" data-nav="previous" class="button is-light">Previous</a>
    </div>
    <div class="steps-action">
      <a href="#" data-nav="next" class="button is-light">Next</a>
    </div>
  </div>
</div>

JavaScript options #

You can use these options to customize the plugin instance. Simply set one or multiple of these options when instancing the plugin.

Name Description Value
Name Description Value
selector Selector to identify steps .step-item
selector_content Selector to identify steps content .step-content
previous_selector Selector to identify previous button data-nav="previous"
next_selector Selector to identify next button data-nav="next"
active_class Class to apply to the active step is-active
completed_class Class to apply to completed step is-completed
beforeNext Callback called before displaying next step null
onShow Callback called when displaying step null
onFinish Callback called when all steps have been completed null
onError Callback called on error null

Thanks to aramvisser for the marker name idea and for the sizes mixin declaration (which is smart).