¿Es posible adaptar dos botones para que, en pantallas grandes, estén uno al lado del otro, pero en pantallas pequeñas uno este arriba y otro abajo?
Tengo el siguiente código:
<div class="text-center">
<a href="#" class="btn btn-primary" >View Transcripts</a>
<a href="#" class="btn btn-primary" >Download Certificate</a>
</div>
Lo que ocurre es cuando la pantalla es muy pequeña (small or extra small) los botones se juntan y se ve mal.
He leído la documentación de Bootstrap y se me ocurren opciones, no obstante, no las considero buenas.
Crear HTML para tener botones chicos y grandes, y mostrar el que corresponda acorde a la pantalla del dispositivo.
Ponerlos directamente uno abajo del otro.
Crear dos div, uno para dispositivos grandes y otros para dispositivos chicos. Cada uno con su propio HTML y usar el que responda.
Los botones de bootstrap se encuentran un poco personalizados:
.btn {
cursor: pointer;
text-align: center;
padding-top: 0.5rem;
padding-bottom: 0.7rem;
padding-right: 50px;
padding-left: 50px;
font-size: 16px;
white-space: nowrap;
font-weight: 500;
letter-spacing: 0.7px;
border-radius: 2em;
text-decoration: none;
padding-top: 11px;
}
Y desconozco como aumentar la separacion entre ellos mediante html.