Steps

A component that displays content as a process with defined by user milestones.

Horizontal example

You can utilize .step{-sm|-md|-lg|-xl} classes to change when they are horizontally aligned.

This example is horizontally aligned above -md resolution and vertically below. Resize the window to see it in action.

By default .step is vertically aligned.

Color variations

Add any of the below mentioned modifier classes to change the appearance of a step.

Including soft colors.

Sizes

Use .step-icon-lg for large size.

Use .step-icon-sm for smaller size.

Use .step-icon-xs for extra small size.

Horizontally center aligned

Use .step-centered to center align.

Inline steps

Turn your horizontal step in to inline style and borders in the center with .step-inline class.

Item between

Use .step-item-between to fill the whole between individual titles.

Last item borderless

Use .step-border-last-0 to remove the border from the last item.

Dashed style

Use .step-dashed for a dashed style border.

Icon style

Make icons look different by adding .step-icon-pseudo next to the .step-icon class.

Or go with simple icons.

Avatars

Available in all .step-icon-lg, .step-icon-sm or .step-icon-xs sizes.

Dividers

Use .step-divider to divide steps with dates, names or any text.

Timeline

Create a vertical oriented timeline with the .step-timeline{-sm|-md|-lg|-xl} classes.