Step - SB Admin Pro

Basic Step Component

Step 1

Step 2

Step 3

HTML
PUG

//- Step Component Example
.step.mb-5
    .step-item
        a.step-item-link(href='#!') Step 1
    .step-item
        a.step-item-link(href='#!') Step 2
    .step-item.active
        a.step-item-link(href='#!') Step 3
    .step-item
        a.step-item-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Step 4

Use the .active class on the step item element in order to show which item is active. The remaining items will gray out, and the .disabled class can be added to the step item links to disable them from being clicked on as well!

Step Component Sizing

HTML
PUG

//- Large Step Component Example
.step.step-lg
    .step-item
        a.step-item-link(href='#!') Step 1
    .step-item
        a.step-item-link(href='#!') Step 2
    .step-item.active
        a.step-item-link(href='#!') Step 3
    .step-item
        a.step-item-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Step 4

Use the .step-lg variation with the step component to create a larger step component size.

Step Component Color Options

HTML
PUG

//- Step Primary Example
.step.step-primary
    .step-item
        a.step-item-link(href='#!') Step 1
    .step-item
        a.step-item-link(href='#!') Step 2
    .step-item.active
        a.step-item-link(href='#!') Step 3
    .step-item
        a.step-item-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Step 4

//- Step Secondary Example
.step.step-secondary
    .step-item
        a.step-item-link(href='#!') Step 1
    .step-item
        a.step-item-link(href='#!') Step 2
    .step-item.active
        a.step-item-link(href='#!') Step 3
    .step-item
        a.step-item-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Step 4

//- Step Success Example
.step.step-success
    .step-item
        a.step-item-link(href='#!') Step 1
    .step-item
        a.step-item-link(href='#!') Step 2
    .step-item.active
        a.step-item-link(href='#!') Step 3
    .step-item
        a.step-item-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Step 4

//- Step Info Example
.step.step-info
    .step-item
        a.step-item-link(href='#!') Step 1
    .step-item
        a.step-item-link(href='#!') Step 2
    .step-item.active
        a.step-item-link(href='#!') Step 3
    .step-item
        a.step-item-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Step 4

//- Step Warning Example
.step.step-warning
    .step-item
        a.step-item-link(href='#!') Step 1
    .step-item
        a.step-item-link(href='#!') Step 2
    .step-item.active
        a.step-item-link(href='#!') Step 3
    .step-item
        a.step-item-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Step 4

//- Step Danger Example
.step.step-danger
    .step-item
        a.step-item-link(href='#!') Step 1
    .step-item
        a.step-item-link(href='#!') Step 2
    .step-item.active
        a.step-item-link(href='#!') Step 3
    .step-item
        a.step-item-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Step 4

Use any of the contextual color classes included with Bootstrap, or any of the non-contextual color classes added with SB Admin Pro, for example, .step-blue to control the color of your step component.

Step Component Items

HTML
PUG

//- Two Step Example
.step
    .step-item
        a.step-item-link(href='#!') Step 1
    .step-item.active
        a.step-item-link(href='#!') Step 2

//- Three Step Example
.step
    .step-item
        a.step-item-link(href='#!') Step 1
    .step-item.active
        a.step-item-link(href='#!') Step 2
    .step-item
        a.step-item-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Step 3

//- Four Step Example
.step
    .step-item
        a.step-item-link(href='#!') Step 1
    .step-item
        a.step-item-link(href='#!') Step 2
    .step-item.active
        a.step-item-link(href='#!') Step 3
    .step-item
        a.step-item-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Step 4

//- Five Step Example
.step
    .step-item
        a.step-item-link(href='#!') Step 1
    .step-item
        a.step-item-link(href='#!') Step 2
    .step-item.active
        a.step-item-link(href='#!') Step 3
    .step-item
        a.step-item-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Step 4
    .step-item
        a.step-item-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Step 5

You can add or remove steps in the step component. Note that the content of each step can be hidden if there are a large number of steps, but the text content in the step item link must be modified for multiple steps for responsive sizing when needed.

Basic
Sizing
Colors
Items