Steps custom bootstrap step elements to be used for form flows with steps

HEADER

  • Dark Header
  • Light Header

LAYOUT

  • Theme Style
  • Layout
  • Header
  • Top Dropdowns
  • Sidebar Mode
  • Sidebar Menu
  • Sidebar Position
  • Footer
Default
Default
Default element style. Activate by adding 
.step-default
class to the 
.row
element

1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration


Thin
Thin variation for default element style. Activate by adding 
.step-thin
class to the 
.row
element

1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration


No Background
No background variation for default element style. Activate by adding 
.step-no-background
class to the 
.row
element

1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration


No Background Thin
Thin variation for default no background element style. Activate by adding 
.step-no-background-thin
class to the 
.row
element

1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
Default - Dark
No Background
No background variation for default element style. Activate by adding 
.step-no-background
class to the 
.row
element

1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration


No Background Thin
Thin variation for default no background element style. Activate by adding 
.step-no-background-thin
class to the 
.row
element

1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
Numbered Background
Background
Numbered background element style. Activate by adding 
.step-background
class to the 
.row
element

1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration


Background Thin
Thin variation for Numbered Background element style. Activate by adding 
.step-background-thin
class to the 
.row
element

1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
Line
Line
Numbered Line element style. Activate by adding 
.step-line
class to the 
.row
element. 
.first
and 
.last
classes are required to be added into 
.mt-step-col
to indicate the first and last step.

1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration


4 Steps Line
4 Steps Numbered Line element style. Activate by adding 
.step-line
class to the 
.row
element. 
.first
and 
.last
classes are required to be added into 
.mt-step-col
to indicate the first and last step.

1
Setup
Lorem ipsum dolor sit amet
2
Develop
Lorem ipsum dolor sit amet
3
Testing
Lorem ipsum dolor sit amet
4
Launch
Lorem ipsum dolor sit amet
Line - Dark
Line
Numbered Line element style. Activate by adding 
.step-line
class to the 
.row
element. 
.first
and 
.last
classes are required to be added into 
.mt-step-col
to indicate the first and last step.

1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration


4 Steps Line
4 Steps Numbered Line element style. Activate by adding 
.step-line
class to the 
.row
element. 
.first
and 
.last
classes are required to be added into 
.mt-step-col
to indicate the first and last step.

1
Setup
Lorem ipsum dolor sit amet
2
Develop
Lorem ipsum dolor sit amet
3
Testing
Lorem ipsum dolor sit amet
4
Launch
Lorem ipsum dolor sit amet
Default 50%
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
Thin 50%
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
No Background 50%
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
No Background Thin 50%
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
Active Status
All active status is controlled by adding a 
.active
class to the 
.mt-step-col
element
1
Active
Active status preview
Completed Status
All active status is controlled by adding a 
.done
class to the 
.mt-step-col
element
6
Complete
Preview for done/completed status
Error Status
All active status is controlled by adding a 
.error
class to the 
.mt-step-col
element
4
Error
Error status preview
Numbered Icons
Simple Line Icons
Icons in place of numbers for steps. Replace the 
.mt-step-number
text with the icon of your choice.

Purchase
Purchasing the item
Payment
Complete your payment
Deploy
Receive item integration


FontAwesome Icons
Icons in place of numbers for steps. Replace the 
.mt-step-number
text with the icon of your choice.

Purchase
Purchasing the item
Payment
Complete your payment
Deploy
Receive item integration

Staff

  • 8
    ...

    Bob Nilson

    Project Manager
  • ...

    Nick Larson

    Art Director
  • 3
    ...

    Deon Hubert

    CTO
  • ...

    Ella Wong

    CEO

Customers

  • 2
    ...

    Lara Kunis

    CEO, Loop Inc
    Last seen 03:10 AM
  • new
    ...

    Ernie Kyllonen

    Project Manager,
    SmartBizz PTL
  • ...

    Lisa Stone

    CTO, Keort Inc
    Last seen 13:10 PM
  • 7
    ...

    Deon Portalatin

    CFO, H&D LTD
  • ...

    Irina Savikova

    CEO, Tizda Motors Inc
  • 4
    ...

    Maria Gomez

    Manager, Infomatic Inc
    Last seen 03:10 AM
Back
Bob Nilson 20:15 When could you send me the report ?
Ella Wong 20:15 Its almost done. I will be sending it shortly
Bob Nilson 20:15 Alright. Thanks! :)
Ella Wong 20:16 You are most welcome. Sorry for the delay.
Bob Nilson 20:17 No probs. Just take your time :)
Ella Wong 20:40 Alright. I just emailed it to you.
Bob Nilson 20:17 Great! Thanks. Will check it right away.
Ella Wong 20:40 Please let me know if you have any comment.
Bob Nilson 20:17 Sure. I will check and buzz you if anything needs to be corrected.

General

System

General Settings

  • Enable Notifications
  • Allow Tracking
  • Log Errors
  • Auto Sumbit Issues
  • Enable SMS Alerts

System Settings

  • Security Level
  • Failed Email Attempts
  • Secondary SMTP Port
  • Notify On System Error
  • Notify On SMTP Error
2016 © Metronic Theme By Keenthemes  |  Purchase Metronic!