0

como puedo bajar el texto change para que aparezca en el medio del contenido usando bootstrap

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
 <div class=" row justify-content-center mt-5">
      <div class="col-4">
        <img src="/Order Sumary/images/icon-music.svg" alt="">
        <span class="h6"> Annual Plan</span>
        <span class="text"><a href="">Change</a></span>
        <p>$59.99/year</p>
      </div>
      
    </div>
    

No se como puedo hacer para bajar un poco más el enlace (texto) Change he probado con todo con margin por ejemplo y nada

2
  • No es claro el resultado esperado, pareciera que con un <br> entre los <span> es suficiente.
    – Sal
    Commented el 20 sept. 2021 a las 23:28
  • hice un update a mi respuesta, creo que es el resultado que esperas
    – Rene Limon
    Commented el 20 sept. 2021 a las 23:30

1 respuesta 1

1

Puse un borde para verlo mejor, lo único que tiene que hacer es cambiar la clase del margin (mt-5) de lugar

UPDATE: Hice algunas modifcaciones per mantuve el grid como lo tenias.

  • Primero puse un col-12 para que abarque toda la pantalla
  • Después quite el justify-content-center de donde lo tenias y creé un nuevo div de tipo flex para poner el contenido y listo

.box {
  border: solid 1px red
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="row box">
  <div class="col-12 my-5">
    <div class="justify-content-center d-flex">
      <div class='text-center'>
        <img src="/Order Sumary/images/icon-music.svg" alt="">
        <span class="h6"> Annual Plan</span>
        <span class="text d-block"><a href="">Change</a></span>
        <p>$59.99/year</p>
      </div>
    </div>
  </div>

</div>

0

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.