0

Ando aprendiendo Bootstrap y me encontré con lo siguiente. Buscaba hacer botones totalmente redondos, tomé la referencia de este enlace

y posteriormente probé a hacerlo con código de bootstrap:

-----HTML:

<button type="button" class="btn btn-success">con boostrap</button>

-----CSS:

.btn{
    border-radius: 20px;
    width: 20px;
    height: 20px;

}

Pero al copia ambos, tanto haciéndolo con html como con bootstrap encontraba lo siguiente:

descripción

Tras ver que en la web de jsfiddle.net si se reproducía bien el html decidí retirar del head el link con bootstrap para ver si mi html se vería igual que en jsfiddle.net y ya estaba todo correcto, se veía perfecto (excepto el código de bootstrap obviamente).

introducir la descripción de la imagen aquí

Por lo tanto, el fallo está en la cdn de bootstrap entiendo yo.

Mi pregunta es, ¿Qué se hace en estos casos? Quiero seguir trabajando con Bootstrap pero no quiero volver a encontrarme con errores como estos y pensar que algo mal ando escribiendo.

2
  • 1
    La CDN no funciona mal, tal cual te dice Angel en su respuesta, para qué usas una clase de Bootstrap predefinida si le vas a cambiar los valores? Para ello utiliza una clase tuya o puedes usar .btn-circle { width: 30px; height: 30px; border-radius: 50%; } Si lo tuyo sigue siendo cambiar valores, elimina de la clase .btn los valores de padding y margin o déjalos en 0. Como recomendación adicional, usa porcentajes en vez de pixeles para el border-radius. el 26 dic. 2018 a las 14:05
  • Hola! Muchisimas gracias por vuestras respuestas. Siento no contestar en su día pero terminé orientandome con sus planteamientos y avanzar en mis estudios. Gracias
    – Eduardo
    el 6 mar. 2019 a las 0:57

2 respuestas 2

1

Antes que nada, la "CDN" no funciona mal

Viendo el código que has puesto, creo que el tema va de compatibilidad y responsabilidades, estás intentando modificar un componente que tiene su lógica "per se", es decir, estás queriendo sobreescribir un elemento pre-configurado a través de una clase con sus características propias.

Bootstrap evita que "metas mano" a sus reglas predefinidas, por lo cual si has declarado un botón con bs, no deberías intentar modificarlo con su mismo nombre de clase, bs te ofrece cualquier cosa dentro de sus reglas.

En resumen:

<a class="rounded-circle" 

Eso es lo mas cercano según entiendo tu inquietud, que de todas formas no la veo del todo clara.

1
  • Hola! Muchisimas gracias por vuestras respuestas. Siento no contestar en su día pero terminé orientandome con sus planteamientos y avanzar en mis estudios. Gracias
    – Eduardo
    el 6 mar. 2019 a las 0:57
0

Te dejo un ejemplo de como lo haría yo, es básicamente dándole un tamaño por defecto

.btn-circular {
  position: relative;
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.btn-circular2 {
  position: relative;
  height: 150px;
  width: 150px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Mi sitio con Bootstrap</title>
  <!-- Bootstrap 4 CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
</head>

<body>
  <header class="text-center p-4 bg-primary mb-4">
    <h1>Header</h1>
  </header>
  <main>
    <div class="container">
      <h1>Aquí va el contenido</h1>
      <h2>welcome</h2>
      <p>Te dejo unos botones de ejemplo para que puedas usar.</p>
      <hr />
      <!-- 1 -->
      <p>Este botón tiene la desventaja de hacerce ovalado entre más texto</p>
      <a href="#" class="btn btn-danger rounded-circle px-4">
        <div>
          <p class="m-0">Botón uno</p>
        </div>
      </a>
      <hr />
      <!-- 2 -->
      <p>Yo personalmete prefiero el siguiente, que es como una píldora</p>
      <a href="#" class="btn btn-danger rounded-pill px-4">
        <div>
          <p class="m-0">Botón dos</p>
        </div>
      </a>
      <hr />
      <!-- 3 -->
      <p>Pero atentiendo a tu petición, dejaré uno que sea 100% circular:</p>
      <a href="#" class="btn btn-danger p-2 rounded-circle">
        <div class="btn-circular">
          <p class="m-0 p-2">Botón</p>
        </div>
      </a>
      <hr />
      <p>
        Para poner un contenido más grande solo hace falta ir a los estilos y aumentar el tamaño, te dejo otro ejemplo:
      </p>
      <a href="#" class="btn btn-danger p-2 rounded-circle">
        <div class="btn-circular2">
          <p class="m-0 p-2">Este botón es 100% circular</p>
        </div>
      </a>
    </div>
  </main>
  <footer class="text-center bg-secondary p-4 mt-4">
    <h3>Footer</h3>
    <p>Este es el footer</p>
  </footer>
  <!-- Dependencias de bootstrap -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

</html>

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.