How to create wizard as sequence diagram on overflow in HTML? - html

Question

I want to have a wizard form with too many steps, I was able to get in one single straight line. But when view on a small screen and content overflows it's going out of the box. So to avoid it I am thinking of doing as in the image. So how to make this in HTML5, CSS3 and bootstrap without JQuery or any JS libraries
Here is the link to minimal HTML code
<style>
.step-indicator {
border-collapse: separate;
display: block;
margin-left: 0px;
position: relative;
table-layout: fixed;
text-align: center;
padding-left: 0;
margin-bottom: 0;
overflow-x: auto;
}
.step-indicator li {
display: table-cell;
position: relative;
float: none;
padding: 0;
width: 1%;
}
.step-indicator li:after {
background-color: #c8ced3;
content: "";
display: block;
height: 1px;
position: absolute;
width: 100%;
top: 20px;
}
.step-indicator li:after {
left: 50%;
}
.step-indicator li:last-of-type:after {
display: none !important;
}
.step-indicator li.active .step {
border-color: #378ad8;
color: #378ad8;
}
.step-indicator li.active .caption {
color: #378ad8;
}
.step-indicator li.complete:after {
background-color: #0cbb70;
}
.step-indicator li.complete .step {
border-color: #0cbb70;
color: #0cbb70;
}
.step-indicator li.complete .caption {
color: #0cbb70;
}
.step-indicator .step {
background-color: #fff;
border-radius: 50%;
border: 1px solid #c8ced3;
color: #c8ced3;
height: 40px;
line-height: 40px;
margin: 0 auto;
position: relative;
width: 40px;
z-index: 1;
}
.step-indicator .step:hover {
cursor: pointer;
}
.step-indicator .caption {
color: #c8ced3;
padding: 11px 16px;
}
.step-indicator .caption span:hover {
cursor: pointer;
}
</style>
<div class="container-fluid">
<div class="animated fadeIn">
<div class="row">
<div class="col-12">
<div class="card text-center">
<div class="card-body">
<ol class="step-indicator ps">
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<li>
<div class="step"><i class="step-icon fas fa-link"></i>
</div>
<div class="caption hidden-xs hidden-sm pb-0"><span>1</span></div>
</li>
<li class="ng-star-inserted active">
<div class="step"><i class="step-icon fas fa-search"></i>
</div>
<div class="caption hidden-xs hidden-sm pb-0"><span>2</span></div>
</li>
<li>
<div class="step"><i class="step-icon fas fa-poll"></i>
</div>
<div class="caption hidden-xs hidden-sm pb-0"><span>3</span></div>
</li>
<li>
<div class="step"><i class="step-icon fa cfa-datacenter"></i></div>
<div class="caption hidden-xs hidden-sm pb-0"><span>4</span></div>
</li>
<li>
<div class="step"><i class="step-icon fa fa-cube"></i>
</div>
<div class="caption hidden-xs hidden-sm pb-0"><span>5</span></div>
</li>
<li>
<div class="step"><i class="step-icon fa fa-fire"></i>
</div>
<div class="caption hidden-xs hidden-sm pb-0"><span>6</span></div>
</li>
<li>
<div class="step"><i class="step-icon fa fa-sitemap"></i>
</div>
<div class="caption hidden-xs hidden-sm pb-0"><span>7</span></div>
</li>
<li>
<div class="step"><i class="step-icon fa fa-balance-scale"></i></div>
<div class="caption hidden-xs hidden-sm pb-0"><span>8</span></div>
</li>
<li>
<div class="step"><i class="step-icon fa fa-laptop"></i>
</div>
<div class="caption hidden-xs hidden-sm pb-0"><span>9</span></div>
</li>
<li>
<div class="step"><i class="step-icon fa fa-database"></i>
</div>
<div class="caption hidden-xs hidden-sm pb-0"><span>10</span></div>
</li>
<li>
<div class="step"><i class="step-icon fa fa-clipboard"></i>
</div>
<div class="caption hidden-xs hidden-sm pb-0"><span>11</span></div>
</li>
</ol>
</div>
</div>
</div>
<div class="col-12">
</div>
</div>
</div>
</div>