Soy novato con boostrap y quiero alinear dos divs que estan dentro de un div con class "row" estoy intentando lograr que los botones esten en vertical a la izquierda de mi tabla y el button agregar se quede ahi abajo.
Estoy usando un contenedor para los botones y otro contenedor para la tabla y un contenedor principal donde estan esos dos divs para poder alinearlos como explico pero no logro hacerlo, si me ayudan seria genial, muchas gracias!
Y si no está de más si me pudieran ayudar tambien para saber como hacer lo que explico de una manera responsive jeje Edit: Me olvide de agregar el button jaja
aqui el codigo:
.main-container {
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
}
.container-table {
padding: 0;
border: 1px solid darkgray;
border-radius: 7px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-container mb-5">
<fieldset class="border p-2 col-10">
<legend class="w-auto"><strong>Gestión de rutinas</strong> </legend>
<div class="row mt-5 align-items-center justify-content-center">
<div class="buttons mb-2 mt-2 p-1 btn-group-vertical">
<button class="btn btn-secondary w-25 mr-2">Comunicaciones</button>
<button class="btn btn-secondary w-25 mr-2">Radio ayudas</button>
<button class="btn btn-secondary w-25 mr-2">Electromecanica</button>
<button class="btn btn-secondary w-25 mr-2">Radar</button>
<button class="btn btn-secondary w-25">Procesamiento de datos</button>
</div>
<div class="container-table col-sm-10">
<table class="table table-striped ">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Equipo</th>
<th scope="col">Rutina</th>
<th scope="col">Periodo</th>
<th scope="col">Tiempo</th>
<th scope="col">Ver Procedimientos</th>
<th scope="col">Modificar</th>
<th scope="col">Eliminar</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">001</th>
<td>Telefono</td>
<td>1.0 Limpieza y revisión</td>
<td>Mensual</td>
<td>30 min</td>
<td><a href="">VER</a></td>
<td><a href="#" style="color: black;"><strong><i class="fas fa-edit"></i></strong></a>
</td>
<td><a href="#" style="color: black;"><strong><i
class="fas fa-trash-alt"></i></strong></a>
</td>
</tr>
<tr>
<th scope="row">002</th>
<td>Impresora</td>
<td>2.0 Revisión</td>
<td>Semanal</td>
<td>1 hr</td>
<td><a href="">VER</a></td>
<td><a href="#" style="color: black;"><strong><i class="fas fa-edit"></i></strong></a>
</td>
<td><a href="#" style="color: black;"><strong><i
class="fas fa-trash-alt"></i></strong></a>
</td>
</tr>
<tr>
<th scope="row">003</th>
<td>Computadora</td>
<td>3.0 Formateo y limpieza</td>
<td>Mensual</td>
<td>1hr min</td>
<td><a href="">VER</a></td>
<td><a href="#" style="color: black;"><strong><i class="fas fa-edit"></i></strong></a>
</td>
<td><a href="#" style="color: black;"><strong><i
class="fas fa-trash-alt"></i></strong></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Button modal -->
<button class="btn btn-primary mt-5 mb-5 float-left" type="button" data-toggle="collapse"
data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="fas fa-plus"></i>Agregar rutina
</button>