the problem I have today is that I am generating this HTML table:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<br>
<h2 class="text-secondary border border-secondary border-top-0 border-left-0 border-right-0 text-center">Lista de Paises</h2>
<div class="form-group row">
<div class="col-sm-6">
<input type="submit" value="Crear Pais" class="btn btn-success" />
</div>
</div>
<table class="table table-active text-center">
<thead class="thead-dark">
<tr>
<th>PAIS</th>
<th>OPCIONES</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mexico</td>
<td>
<div class="form-group row">
<div class="col-sm-2">
<input type="submit" value="Editar" class="btn btn-primary" />
</div>
<div class="col-sm-2">
<input type="submit" value="Eliminar" class="btn btn-danger" />
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Which as you can see the buttons editar
and eliminar
are inserted on the left side of the column OPCIONES
, which I come to ask for your help since I have tried to correct them, centering them with CSS or in the same HTML but I have not achieved its goal. So I ask you if you can correct the problem, centering the buttons would help me a lot. Thank you
In bootstrap 4 you have the class
justify-content-center
that you can apply to the div.row:You could leave the two buttons inside the same div, in this way you use the class
.text-center
I leave you the example: