Stepper
Vertical Stepper
1
Step 1
Step Description
2
Step 2
Step Description
3
Step 3
Step Description
4
Step 4
Step DescriptionVertical Stepper Timeline
1 Nov 2022, 12.00 AM
1
Step 1
Step Description1 May 2022, 12.00 AM
2
Step 2
Step Description1 Dec 2022, 12.00 AM
3
Step 3
Step Description1 May 2022, 12.00 AM
4
Step 4
Step DescriptionHorizontal Stepper
1
Step 1
2
Step 2
3
Step 3
4
Step 4
5
Step 5
Copy
<div class="row">
<div class="col-lg-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Vertical Stepper</h5>
<div class="order-track">
<div class="order-track-step">
<div class="order-track-status">
<span class="order-track-status-dot">1</span>
<span class="order-track-status-line"></span>
</div>
<div class="order-track-text">
<p class="order-track-text-stat">Step 1</p>
<span class="order-track-text-sub">Step Description</span>
</div>
</div>
<div class="order-track-step">
<div class="order-track-status">
<span class="order-track-status-dot">2</span>
<span class="order-track-status-line"></span>
</div>
<div class="order-track-text">
<p class="order-track-text-stat">Step 2</p>
<span class="order-track-text-sub">Step Description</span>
</div>
</div>
<div class="order-track-step">
<div class="order-track-status">
<span class="order-track-status-dot">3</span>
<span class="order-track-status-line"></span>
</div>
<div class="order-track-text">
<p class="order-track-text-stat">Step 3</p>
<span class="order-track-text-sub">Step Description</span>
</div>
</div>
<div class="order-track-step">
<div class="order-track-status">
<span class="order-track-status-dot ongoing ">4</span>
<span class="order-track-status-line"></span>
</div>
<div class="order-track-text">
<p class="order-track-text-stat">Step 4</p>
<span class="order-track-text-sub">Step Description</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="card">
<div class="card-body">
<h5 class="card-title">Vertical Stepper Timeline</h5>
<div class="order-track">
<div class="order-track-step">
<div class="order-track-text">
<p class="order-track-text-stat">1 Nov 2022, 12.00 AM</p>
</div>
<div class="order-track-status">
<span class="order-track-status-dot">1</span>
<span class="order-track-status-line"></span>
</div>
<div class="order-track-text">
<p class="order-track-text-stat">Step 1</p>
<span class="order-track-text-sub">Step Description</span>
</div>
</div>
<div class="order-track-step">
<div class="order-track-text">
<p class="order-track-text-stat">1 May 2022, 12.00 AM</p>
</div>
<div class="order-track-status">
<span class="order-track-status-dot">2</span>
<span class="order-track-status-line"></span>
</div>
<div class="order-track-text">
<p class="order-track-text-stat">Step 2</p>
<span class="order-track-text-sub">Step Description</span>
</div>
</div>
<div class="order-track-step">
<div class="order-track-text">
<p class="order-track-text-stat">1 Dec 2022, 12.00 AM</p>
</div>
<div class="order-track-status">
<span class="order-track-status-dot ongoing">3</span>
<span class="order-track-status-line ongoing"></span>
</div>
<div class="order-track-text">
<p class="order-track-text-stat ">Step 3</p>
<span class="order-track-text-sub">Step Description</span>
</div>
</div>
<div class="order-track-step">
<div class="order-track-text">
<p class="order-track-text-stat">1 May 2022, 12.00 AM
</p>
</div>
<div class="order-track-status">
<span class="order-track-status-dot ongoing ">4</span>
<span class="order-track-status-line"></span>
</div>
<div class="order-track-text">
<p class="order-track-text-stat">Step 4</p>
<span class="order-track-text-sub">Step Description</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Horizontal Stepper</h5>
<div class="md-stepper-horizontal Horizontal">
<div class="md-step active">
<div class="md-step-circle"><span>1</span></div>
<div class="md-step-title">Step 1</div>
<div class="md-step-bar-left"></div>
<div class="md-step-bar-right"></div>
</div>
<div class="md-step active">
<div class="md-step-circle"><span>2</span></div>
<div class="md-step-title">Step 2</div>
<div class="md-step-bar-left"></div>
<div class="md-step-bar-right"></div>
</div>
<div class="md-step active">
<div class="md-step-circle"><span>3</span></div>
<div class="md-step-title">Step 3</div>
<div class="md-step-bar-left"></div>
<div class="md-step-bar-right"></div>
</div>
<div class="md-step active">
<div class="md-step-circle"><span>4</span></div>
<div class="md-step-title">Step 4</div>
<div class="md-step-bar-left"></div>
<div class="md-step-bar-right"></div>
</div>
<div class="md-step">
<div class="md-step-circle"><span>5</span></div>
<div class="md-step-title">Step 5</div>
<div class="md-step-bar-left"></div>
<div class="md-step-bar-right"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Copy
.md-stepper-horizontal {
display:table;
width:100%;
margin:0 auto;
background-color:#FFFFFF;
box-shadow: 0 3px 8px -6px rgba(0,0,0,.50);
}
.md-stepper-horizontal .md-step {
display:table-cell;
position:relative;
padding:24px;
}
.md-stepper-horizontal .md-step:active {
border-radius: 15% / 75%;
}
.md-stepper-horizontal .md-step:first-child:active {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.md-stepper-horizontal .md-step:last-child:active {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.md-stepper-horizontal .md-step:hover .md-step-circle {
background-color:#757575;
}
.md-stepper-horizontal .md-step:first-child .md-step-bar-left,
.md-stepper-horizontal .md-step:last-child .md-step-bar-right {
display:none;
}
.md-stepper-horizontal .md-step .md-step-circle {
width: 2.2rem;
height: 2.2rem;
margin:0 auto;
background-color:#9D9D9B;
border-radius: 50%;
text-align: center;
line-height:30px;
font-size: 16px;
font-weight: 400;
color:#FFFFFF;
}
.md-stepper-horizontal.orange .md-step.active .md-step-circle {
background-color:#167df5;
}
.md-stepper-horizontal .md-step.active .md-step-circle {
background-color: rgb(33,150,243);
}
.md-stepper-horizontal .md-step .md-step-title {
margin-top:16px;
}
.md-stepper-horizontal .md-step .md-step-title,
.md-stepper-horizontal .md-step .md-step-optional {
text-align: center;
}
.md-step-title {
font-size: 14px;
margin-bottom: 3px;
color: #5F5F5F;
font-weight: 700;
}
.md-stepper-horizontal .md-step .md-step-bar-left,
.md-stepper-horizontal .md-step .md-step-bar-right {
position: absolute;
top: 39px;
height: 1px;
border-top: 3px solid #167df5;
}
.md-stepper-horizontal .md-step .md-step-bar-right {
right:0;
left:48%;
margin-left:20px;
}
.md-stepper-horizontal .md-step .md-step-bar-left {
left:0;
right:48.80%;
margin-right:20px;
}