0

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

<div class="card" style="width: 58rem;">
  <div class="card-body">
    <h5 class="card-title"> se dieron ciberataques que borran datos de bancos y el Gobierno</h5>
    <h6 class="card-subtitle mb-2 text-muted">24/2/2022</h6>
    <div class="container-all">

      <p class=""> aca va un articulo que cree</p>
      <img src="img/mujer hacker.jpg" alt="Mujer hacker">
    </div>
    <p class="saltos"></p>
    <button type="button" class="btn btn-success float-right ">Aceptar publicación</button>
    <button type="button" class="btn btn-danger float-right">Rechazar publicación</button>
  </div>
</div>

3
  • ¿Que quieres hacer? ¿Separar los botones entre sí? ¿O separar los botones del "Mujer hacker"?
    – masterguru
    el 4 abr. 2022 a las 17:04
  • los botones entre si el 4 abr. 2022 a las 17:05
  • La próxima vez, no agregues ruido a la pregunta. En su lugar, describe el problema.
    – padaleiana
    el 4 abr. 2022 a las 17:42

1 respuesta 1

1

Para la separación de elementos bootstrap usa las clases de utilidades de espaciado, entre las cuales seguramente te interese, por ejemplo, esta ms-2, que quiere decir lo siguiente:

  • m: margen a aplicar
  • s: en bootstrap 5 significa start, en bootstrap 4 y anteriores se usa l que significa izquierda (left)
  • x: donde x representa un número, entre el 0 y el 5, al cual se le aplica una fórmula que encontraras en el enlace que he puesto antes, y que tiene en cuenta el espaciado actual establecido.

Por lo tanto, ms-2 significa:

margen izquierdo con separación de 2

Ejemplo (he puesto un ms-5 para que lo veas mejor en el segundo botón):

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

<div class="card" style="width: 58rem;">
  <div class="card-body">
    <h5 class="card-title"> se dieron ciberataques que borran datos de bancos y el Gobierno</h5>
    <h6 class="card-subtitle mb-2 text-muted">24/2/2022</h6>
    <div class="container-all">

      <p class=""> aca va un articulo que cree</p>
      <img src="img/mujer hacker.jpg" alt="Mujer hacker">
    </div>
    <p class="saltos"></p>
    <button type="button" class="btn btn-success float-right ">Aceptar publicación</button>
    <button type="button" class="ms-5 btn btn-danger float-right">Rechazar publicación</button>
  </div>
</div>

3
  • muchas gracias , muy buena explicación el 4 abr. 2022 a las 17:17
  • De nada, me alegro que te haya servido. Si esta respuesta cumplimenta tu pregunta no olvides marcala como aceptada para que la comunidad lo sepa y no quede pendiente para siempre, gracias. En este enlace explican como aceptar respuestas y el porque es importante hacerlo cuando son válidas.
    – masterguru
    el 4 abr. 2022 a las 17:19
  • Buena respuesta. Importante aclarar que esta clase para agregar márgenes es de forma horizontal, y no vertical como indica el título de la pregunta, seguramente error del OP. En ese caso la clase sería my-*. el 5 abr. 2022 a las 13:32

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.