bootstrap 4 кнопки / элементы слайдера, когда страница превышает

Question

Здравствуйте, я пытаюсь реализовать кнопки с ползунком, как вкладки изображений Google ... я пробовал с bootstrap 4 карты, но не смог понять, как реализовать. можно ли сделать кнопки как в примере ниже ??? я хочу разрабатывать только с css и html, а не со скриптом java. Может ли кто-нибудь, пожалуйста, помогите мне относительно этого. это мне очень поможет, заранее спасибо,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
  	.box-shadow {
    -webkit-box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.05);
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.16);
}
.btn-outline-secondary
{
	border: 1px solid rgba(0,0,0,.125);
}
.border-left-info
{
	border-left: .25rem solid #17a2b8!important;
}


  </style>

<div class="container-fluid">
  <div class="row mt-4">
  	<div class="col-md-12 mb-4">
  		<div class="card-deck">
  			<div class="card">
  				<button class="btn btn-outline-secondary btn-lg box-shadow border-left-info">BOM
  				<div class="progress" style="height:10px">
  					<div class="progress-bar" style="width:40%;height:10px"></div>
				</div>
  				</button>
  				
  			</div>
  			<div class="card">
  				<button class="btn btn-outline-secondary btn-lg box-shadow border-left-info">BOM
  				<div class="progress" style="height:10px">
  					<div class="progress-bar" style="width:40%;height:10px"></div>
				</div>
  				</button>
  				
  			</div>
  			
  			<div class="card">
  				<button class="btn btn-outline-secondary btn-lg box-shadow border-left-info">BOM
  				<div class="progress" style="height:10px">
  					<div class="progress-bar" style="width:40%;height:10px"></div>
				</div>
  				</button>
  				
  			</div>
  			<div class="card">
  				<button class="btn btn-outline-secondary btn-lg box-shadow border-left-info">BOM
  				<div class="progress" style="height:10px">
  					<div class="progress-bar" style="width:40%;height:10px"></div>
				</div>
  				</button>
  				
  			</div>
  			<div class="card">
  				<button class="btn btn-outline-secondary btn-lg box-shadow border-left-info">BOM
  				<div class="progress" style="height:10px">
  					<div class="progress-bar" style="width:40%;height:10px"></div>
				</div>
  				</button>
  				
  			</div>
  			<div class="card">
  				<button class="btn btn-outline-secondary btn-lg box-shadow border-left-info">BOM
  				<div class="progress" style="height:10px">
  					<div class="progress-bar" style="width:40%;height:10px"></div>
				</div>
  				</button>
  				
  			</div>
  			<div class="card">
  				<button class="btn btn-outline-secondary btn-lg box-shadow border-left-info">BOM
  				<div class="progress" style="height:10px">
  					<div class="progress-bar" style="width:40%;height:10px"></div>
				</div>
  				</button>
  				
  			</div>
  			<div class="card">
  				<button class="btn btn-outline-secondary btn-lg box-shadow border-left-info">BOM
  				<div class="progress" style="height:10px">
  					<div class="progress-bar" style="width:40%;height:10px"></div>
				</div>
  				</button>
  				
  			</div>
  			<div class="card">
  				<button class="btn btn-outline-secondary btn-lg box-shadow border-left-info">BOM
  				<div class="progress" style="height:10px">
  					<div class="progress-bar" style="width:40%;height:10px"></div>
				</div>
  				</button>
  				
  			</div>
  			<div class="card">
  				<button class="btn btn-outline-secondary btn-lg box-shadow border-left-info">BOM
  				<div class="progress" style="height:10px">
  					<div class="progress-bar" style="width:40%;height:10px"></div>
				</div>
  				</button>
  				
  			</div>	
  			<div class="card">
  				<button class="btn btn-outline-secondary btn-lg box-shadow border-left-info">BOM
  				<div class="progress" style="height:10px">
  					<div class="progress-bar" style="width:40%;height:10px"></div>
				</div>
  				</button>
  				
  			</div>
  			<div class="card">
  				<button class="btn btn-outline-secondary btn-lg box-shadow border-left-info">BOM
  				<div class="progress" style="height:10px">
  					<div class="progress-bar" style="width:40%;height:10px"></div>
				</div>
  				</button>
  				
  			</div>
  		</div>	
  	</div>	
  </div>
  	
</div>