1

¿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.

  1. Crear HTML para tener botones chicos y grandes, y mostrar el que corresponda acorde a la pantalla del dispositivo.

  2. Ponerlos directamente uno abajo del otro.

  3. 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.

2 respuestas 2

1

Puedes hacerlo con contenedores flexibles, ejemplo:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container p-5">
  <div class="text-center d-flex justify-content-center flex-sm-row flex-column">
    <a href="#" class="btn btn-primary m-2">View Transcripts</a>
    <a href="#" class="btn btn-primary m-2">Download Certificate</a>
  </div>
</div>

Primero encierro en un container y un p-5 para darle separación al contenido de adentro. Luego puse las siguientes clases:

d-flex justify-content-center flex-sm-row flex-column

En donde:

  • d-flex: los elementos de adentro será flexible (uno al lado del otro).
  • justify-content-center: posiciono al centro los elementos de adentro.
  • flex-sm-row flex-column: se alinearán en filas (vertical) hasta que supere el ancho del sm, luego de superar el ancho, se alineará en columnas (horizontal).

Puedes ver mejor los resultados aquí.

8
  • funciona como esperaba, muchas gracias, no obstante, tanto la separacion horizontal como vertical (en dispositivos con pantallas chicas) es insuficiente, como puedo aumentar ambas? por otro lado, parece que la clase btn se ha personalizado (colores y tamanos fijos), creo que esto ultimo causa problemas
    – Carlos
    Commented el 31 ene. 2023 a las 14:17
  • Buen día, ¿Cuál sería el problema? No logro entender del todo bien. Y también, ¿A que te refieres con que se personalizaron? son los botones oficiales de bootstrap 4 (tal como mencionas en tu etiqueta). getbootstrap.com/docs/4.0/components/buttons Commented el 31 ene. 2023 a las 14:20
  • por supuesto, son botones de bootstrap pero se pueden personalizar mediante css. A lo que yo me referio es a que ya estan personalizados (se define la clase btn la cual reemplaza muchas cosas (voy a editar la pregunta para anadir ese code)
    – Carlos
    Commented el 31 ene. 2023 a las 14:33
  • 1
    @Carlos Ya que mencionas que funciona como esperaba, recuerda verificar la respuesta marcándole al ✔️ para que tu pregunta esté como respondida. Si tienes alguna otra duda, error o problema adicional, no dudes en realizar otra pregunta, saludos :-). Commented el 31 ene. 2023 a las 19:20
  • 1
    Muy completa respuesta y me ha servido, ha sido un gusto darle el ✔️. Muchas gracias. Funciona 90% salvo en un caso (pero no es problema de tu code). El caso es este: en dispositivos xs algunos botones se salen del recuadro (algunos botones tienen nombres mas largos que otros) y la clase btn de bootstrap ha sido personalizado (tamanos especificos) entonces no se como hacer para que cuando el texto sea largo, digamos mas de 15 caracteres, use usa clase de boton (crear btn2 por ejemplo) con menos tamano
    – Carlos
    Commented el 1 feb. 2023 a las 9:51
1

Debes usar los breakpoints que provee Bootstrap para adaptar los tamaños a las distintas pantallas. Te recomiendo llevar a cabo la metodología Mobile First, ya que en Bootstrap, si especificas un tamaño para un dispositivo móvil, por ejemplo, no hará falta añadir los de mayores dimensiones salvo que quieras algo más específico.

Breakpoints de Boostrap

3
  • Entiendo lo que dices, pero el proyecto ya ha sido terminado para escritorio y no es 100% responsive.
    – Carlos
    Commented el 31 ene. 2023 a las 11:42
  • Por favor, ve la nueva respuesta que he añadido
    – Álvaro
    Commented el 31 ene. 2023 a las 11:54
  • 1
    No era necesario agregar una respuesta nueva, sino editar la ya existente.
    – padaleiana
    Commented el 31 ene. 2023 a las 13:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.