0

Estoy empezando a practicar diseño responsivo con Bootstrap para armar un portafolio.

El problema que tengo es el siguiente:

Quiero poner un título que esté a una distancia razonable de la foto de perfil que se ve en la imagen. Dicha distancia no debe superponerse al título y tiene que ser la misma tanto para dispositivos móviles como para pantallas más grandes, pero lo que intenté se "rompe" al achicar la pantalla, adjunto imágenes:

Imagen 1

Imagen 2

Adjunto código HTML

<div class="container bg-primary">
<div class="col-md-4 col-sm-12 position-relative border">
  <div class="position-absolute top-0 start-50 translate-middle">
    <span class="rounded-circle">
      <img src="./assets/img/fotocv.png" class="rounded-circle img-fluid border-dark border border-1" id="fotocv" alt="">
    </span>
  </div>
  <h1 class="border-bottom border-danger fs-4 pb-2 border-4 rounded text-uppercase" id="nombre">Facundo Nicolas Duran</h1>
  <p>Estudiante de Ingeniería en Sistemas de Información</p>
</div>

1 respuesta 1

0

Buen día,

Desconozco si deseas poner algo a la derecha de la imagen (Algún otro texto o algo en la misma fila (Posición horizontal), en dado caso tendrías que adaptarlo un poco, pero podrías utilizar d-flex justify-content-center y pb-5 (Padding bottom, puedes cambiarlo a otros valores si el espacio es muy grande).

Ejemplo (Puse una imagen genérica para que se pueda probar):

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="container bg-primary">
<div class="col-md-4 col-sm-12 position-relative border">
  <div class="d-flex justify-content-center pb-5">
    <span class="rounded-circle">
      <img src="https://static.vecteezy.com/system/resources/previews/002/318/271/original/user-profile-icon-free-vector.jpg" class="rounded-circle img-fluid border-dark border border-1" id="fotocv" alt="">
    </span>
  </div>
  <h1 class="border-bottom border-danger fs-4 pb-2 border-4 rounded text-uppercase" id="nombre">Facundo Nicolas Duran</h1>
  <p>Estudiante de Ingeniería en Sistemas de Información</p>
</div>

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.