WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

PROCESS STEPS

  1. Home
  2. Shortcodes
  3. Process Steps

Tabs

  • 1
    Shop Cart
  • 2
    Review Cart
  • 3
    Checkout
  • 4
    Payment

Shop Cart

Heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Review Cart

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Checkout

Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Payment

Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Show Code 
<ul class="process-steps nav nav-tabs nav-justified text-left">
	<li class="nav-item">
		<a class="nav-link active" href="#step1" data-toggle="tab">1</a>
		<h5>Shop Cart</h5>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#step2" data-toggle="tab">2</a>
		<h5>Review Cart</h5>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#step3" data-toggle="tab">3</a>
		<h5>Checkout</h5>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#step4" data-toggle="tab">4</a>
		<h5>Payment</h5>
	</li>
</ul>

<div class="tab-content mt-60">
	<div role="tabpanel" class="tab-pane active" id="step1">
		<h4>Shop Cart</h4>
		Heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
	</div>

	<div role="tabpanel" class="tab-pane" id="step2">
		<h4>Review Cart</h4>
		Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
	</div>

	<div role="tabpanel" class="tab-pane" id="step3">
		<h4>Checkout</h4>
		Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
	</div>

	<div role="tabpanel" class="tab-pane" id="step4">
		<h4>Payment</h4>
		Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
	</div>
</div>

No Tabs

  • 1
    Shop Cart
  • 2
    Review Cart
  • 3
    Checkout
  • 4
    Payment
  • 5
    Finish
Show Code 
<ul class="process-steps nav nav-justified">
	<li class="nav-item">
		<a class="nav-link active" href="#">1</a>
		<h5>Shop Cart</h5>
	</li>
	<li class="nav-item">
		<a class="nav-link active" href="#">2</a>
		<h5>Review Cart</h5>
	</li>
	<li class="nav-item">
		<a class="nav-link active" href="#">3</a>
		<h5>Checkout</h5>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#">4</a>
		<h5>Payment</h5>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#">5</a>
		<h5>Finish</h5>
	</li>
</ul>

Icons

  • Shop Cart
  • Review Cart
  • Finish
Show Code 
<ul class="process-steps nav nav-justified">
	<li class="nav-item">
		<a class="nav-link" href="#"><i class="icon-shopping-cart"></i></a>
		<h5>Shop Cart</h5>
	</li>
	<li class="nav-item">
		<a class="nav-link active" href="#"><i class="icon-pencil"></i></a>
		<h5>Review Cart</h5>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#"><i class="icon-ok"></i></a>
		<h5>Finish</h5>
	</li>
</ul>

Squared

  • Shop Cart
  • Review Cart
  • Finish
Show Code 
<ul class="process-steps process-steps-square nav nav-justified">
	<li class="nav-item">
		<a class="nav-link" href="#"><i class="icon-shopping-cart"></i></a>
		<h5>Shop Cart</h5>
	</li>
	<li class="nav-item">
		<a class="nav-link active" href="#"><i class="icon-pencil"></i></a>
		<h5>Review Cart</h5>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#"><i class="icon-ok"></i></a>
		<h5>Finish</h5>
	</li>
</ul>

Dots

Step 1
Register User via control panel.
Step 2
Process Payment and fill out all required fields.
Step 3
Confirm Data entered in step 2.
Step 4
Download product after receiving confirmation email.
Show Code 
<div class="row process-wizard process-wizard-primary">

	<div class="col-xs-3 process-wizard-step complete">
		<div class="text-center process-wizard-stepnum">Step 1</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Register User via control panel.</div>
	</div>

	<div class="col-xs-3 process-wizard-step complete"><!-- complete -->
		<div class="text-center process-wizard-stepnum">Step 2</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Process Payment and fill out all required fields.</div>
	</div>

	<div class="col-xs-3 process-wizard-step active"><!-- complete -->
		<div class="text-center process-wizard-stepnum">Step 3</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Confirm Data entered in step 2.</div>
	</div>

	<div class="col-xs-3 process-wizard-step disabled"><!-- active -->
		<div class="text-center process-wizard-stepnum">Step 4</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Download product after receiving confirmation email.</div>
	</div>

</div>
Step 1
Register User via control panel.
Step 2
Process Payment and fill out all required fields.
Step 3
Confirm Data entered in step 2.
Step 4
Download product after receiving confirmation email.
Show Code 
<div class="row process-wizard process-wizard-default">

	<div class="col-xs-3 process-wizard-step complete">
		<div class="text-center process-wizard-stepnum">Step 1</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Register User via control panel.</div>
	</div>

	<div class="col-xs-3 process-wizard-step active"><!-- complete -->
		<div class="text-center process-wizard-stepnum">Step 2</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Process Payment and fill out all required fields.</div>
	</div>

	<div class="col-xs-3 process-wizard-step disabled"><!-- complete -->
		<div class="text-center process-wizard-stepnum">Step 3</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Confirm Data entered in step 2.</div>
	</div>

	<div class="col-xs-3 process-wizard-step disabled"><!-- active -->
		<div class="text-center process-wizard-stepnum">Step 4</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Download product after receiving confirmation email.</div>
	</div>

</div>
Step 1
Register User via control panel.
Step 2
Process Payment and fill out all required fields.
Step 3
Confirm Data entered in step 2.
Step 4
Download product after receiving confirmation email.
Show Code 
<div class="row process-wizard process-wizard-info">

	<div class="col-xs-3 process-wizard-step complete">
		<div class="text-center process-wizard-stepnum">Step 1</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Register User via control panel.</div>
	</div>

	<div class="col-xs-3 process-wizard-step complete"><!-- complete -->
		<div class="text-center process-wizard-stepnum">Step 2</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Process Payment and fill out all required fields.</div>
	</div>

	<div class="col-xs-3 process-wizard-step active"><!-- complete -->
		<div class="text-center process-wizard-stepnum">Step 3</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Confirm Data entered in step 2.</div>
	</div>

	<div class="col-xs-3 process-wizard-step disabled"><!-- active -->
		<div class="text-center process-wizard-stepnum">Step 4</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Download product after receiving confirmation email.</div>
	</div>

</div>
Step 1
Register User via control panel.
Step 2
Process Payment and fill out all required fields.
Step 3
Confirm Data entered in step 2.
Step 4
Download product after receiving confirmation email.
Show Code 
<div class="row process-wizard process-wizard-success">

	<div class="col-xs-3 process-wizard-step complete">
		<div class="text-center process-wizard-stepnum">Step 1</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Register User via control panel.</div>
	</div>

	<div class="col-xs-3 process-wizard-step active"><!-- complete -->
		<div class="text-center process-wizard-stepnum">Step 2</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Process Payment and fill out all required fields.</div>
	</div>

	<div class="col-xs-3 process-wizard-step disabled"><!-- complete -->
		<div class="text-center process-wizard-stepnum">Step 3</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Confirm Data entered in step 2.</div>
	</div>

	<div class="col-xs-3 process-wizard-step disabled"><!-- active -->
		<div class="text-center process-wizard-stepnum">Step 4</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Download product after receiving confirmation email.</div>
	</div>

</div>
Step 1
Register User via control panel.
Step 2
Process Payment and fill out all required fields.
Step 3
Confirm Data entered in step 2.
Step 4
Download product after receiving confirmation email.
Show Code 
<div class="row process-wizard process-wizard-default">

	<div class="col-xs-3 process-wizard-step complete">
		<div class="text-center process-wizard-stepnum">Step 1</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Register User via control panel.</div>
	</div>

	<div class="col-xs-3 process-wizard-step complete"><!-- complete -->
		<div class="text-center process-wizard-stepnum">Step 2</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Process Payment and fill out all required fields.</div>
	</div>

	<div class="col-xs-3 process-wizard-step active"><!-- complete -->
		<div class="text-center process-wizard-stepnum">Step 3</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Confirm Data entered in step 2.</div>
	</div>

	<div class="col-xs-3 process-wizard-step disabled"><!-- active -->
		<div class="text-center process-wizard-stepnum">Step 4</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Download product after receiving confirmation email.</div>
	</div>

</div>
Step 1
Register User via control panel.
Step 2
Process Payment and fill out all required fields.
Step 3
Confirm Data entered in step 2.
Step 4
Download product after receiving confirmation email.
Show Code 
<div class="row process-wizard process-wizard-danger">

	<div class="col-xs-3 process-wizard-step complete">
		<div class="text-center process-wizard-stepnum">Step 1</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Register User via control panel.</div>
	</div>

	<div class="col-xs-3 process-wizard-step active"><!-- complete -->
		<div class="text-center process-wizard-stepnum">Step 2</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Process Payment and fill out all required fields.</div>
	</div>

	<div class="col-xs-3 process-wizard-step disabled"><!-- complete -->
		<div class="text-center process-wizard-stepnum">Step 3</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Confirm Data entered in step 2.</div>
	</div>

	<div class="col-xs-3 process-wizard-step disabled"><!-- active -->
		<div class="text-center process-wizard-stepnum">Step 4</div>
		<div class="progress"><div class="progress-bar"></div></div>
		<a href="#" class="process-wizard-dot"></a>
		<div class="process-wizard-info text-center">Download product after receiving confirmation email.</div>
	</div>

</div>