How to make horizontal scrollbar with columns with bootstrap - html

Question

I have this container that was made with boostrap:
The question is, how can i do to make a horizontal scrolling to maintan the aspect of the first picture of the container but in phone resolutions?..
This is the container in phone resolution:
I don't like it in that way..
This is my code:
<div class="card-body scroll" style="border: none;">
<div class="cont">
<div class="row">
<div class="col-sm-12">
<div class="card" style="border: none;">
<div class="box-header">
<div class="row">
<div class="col-sm-8">
<h3 class="box-title w-text">Gestión de Empresas</h3>
</div>
<div class="col-sm-4">
<div class="box-tools">
<div class="input-group-prepend">
<input type="text" name="table_search" class="form-control pull-right" placeholder="Búsqueda" ng-model="searchField">
<span class="input-group-text">
<i class="fa fa-filter"></i>
</span>
<span class="input-group-text">
<i class="fas fa-plus"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<strong>Razón social</strong>
</div>
<div class="col-sm-3">
<strong>RIF</strong>
</div>
<div class="col-sm-2">
<strong>Dirección fiscal</strong>
</div>
<div class="col-sm-2">
<strong>Activo</strong>
</div>
<div class="col-sm-2">
<strong>Acciones</strong>
</div>
<hr style="border: none;">
</div>
<div class="row" style="text-align: center;">
<div class="col-sm-3">
<h3>Ventor central</h3>
</div>
<div class="col-sm-3">
<h3>J-XYZ</h3>
</div>
<div class="col-sm-2">
<h3>Empresa de pruebas</h3>
</div>
<div class="col-sm-2">
<h3>Activo</h3>
</div>
<div class="col-sm-2" style="color: orange;">
<i class="fas fa-chevron-circle-down"></i>
</div>
<div class="col-sm-3">
<h3>Distribuidora regional del sol</h3>
</div>
<div class="col-sm-3">
<h3>J-1234567890</h3>
</div>
<div class="col-sm-2">
<h3>Carretera nacional</h3>
</div>
<div class="col-sm-2">
<h3>Activo</h3>
</div>
<div class="col-sm-2" style="color: orange;">
<i class="fas fa-chevron-circle-down"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Anyone can help me with this? Thank you!

Answer 1

I found a solution for this issue using the table that is provided with boostrap:
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">
<strong>Razón social</strong>
</th>
<th scope="col">
<strong>RIF</strong>
</th>
<th scope="col">
<strong>Dirección fiscal</strong>
</th>
<th scope="col">
<strong>Activo</strong>
</th>
<th scope="col">
<strong>Acciones</strong>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><h3>Ventor central</h3></td>
<td><h3>J-XYZ</h3></td>
<td><h3>Empresa de pruebas</h3></td>
<td><h3>Activo</h3></td>
<td><i class="fas fa-chevron-circle-down icon-fixed"></i></td>
</tr>
<tr>
<td><h3>Distribuidora regional del sol</h3></td>
<td><h3>J-1234567890</h3></td>
<td><h3>Carretera nacional</h3></td>
<td><h3>Activo</h3></td>
<td><i class="fas fa-chevron-circle-down icon-fixed"></i></td>
</tr>
</tbody>
</table>
You can see the documentation here:
https://getbootstrap.com/docs/4.0/content/tables/