1

me gustaría saber si alguien se le ocurre como puedo alinear tres iconos o fonts, pero deben estar en horizontal con un espacios entre ellos y poderse adaptar a los distintos tipos de dispositivos móviles y otros, lo comento, puesto que no he podido lograrlo y necesito ayuda.

 .info {
  width: 100%;
  background: #fff;
}
 .info i {
  font-size: 20px;
  color: #1977cc;
  float: left;
  width: 44px;
  height: 44px;
  background: #d6e9fa;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

 .info h4 {
  padding: 0 0 0 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #2c4964;
}

 .info p {
  padding: 0 0 0 60px;
  margin-bottom: 0;
  font-size: 14px;
  color: #4b7dab;
}
<div class="col-lg-4">
            <div class="info">
              <div class="address">
                <i class="bi bi-geo-alt"></i>
                <h4>Location:</h4>
                <p>KIST Hospital Road, 44700</p>
              </div>

              <div class="email">
                <i class="bi bi-envelope"></i>
                <h4>Email:</h4>
                <p>[email protected]</p>
              </div>

              <div class="phone">
                <i class="bi bi-phone"></i>
                <h4>Call:</h4>
                <p>+1 55234 5112 33s</p>
              </div>
            </div>
          </div>
          

Esto me podría ayudar a entender de mejor manera como alinear los elementos, ya que están tres iconos metidos en un contenedor y la idea es que sean lo más adaptativos y responsivos posibles, de tal manera que el contenido se puede apreciar de buena manera desde un ordenador hasta un dispositivo móvil.

1 respuesta 1

0

Una mejor opción sería utilizar las rejillas del framework Bootstrap.

Para usarlo, debemos crear un nuevo div con la clase row, en donde indicamos que será una fila, y dentro de esa fila estarán las rejillas.

Las rejillas de Bootstrap tienen un límite del ancho de 12, por la cual, para que los 3 elementos ocupen todo el ancho, dividamos sus rejillas con un ancho de 4.

Los anchos de las rejillas se definen así:

col-md-4 col-12

En donde indico que tus 3 elementos ocupan el ancho de 4 hasta superar el ancho de la pantalla en md (los anchos puedes verlo aquí). Una vez superemos el ancho del md, continuamos al siguiente col, que es justamente el 12, en donde tus 3 elementos ocuparán el ancho máximo, posicionándose 1 debajo del otro.

Entonces, tu estructura HTML quedaría de la siguiente manera:

.info {
  width: 100%;
  background: #fff;
}
.info i {
  font-size: 20px;
  color: #1977cc;
  float: left;
  width: 44px;
  height: 44px;
  background: #d6e9fa;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

.info h4 {
  padding: 0 0 0 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #2c4964;
}

.info p {
  padding: 0 0 0 60px;
  margin-bottom: 0;
  font-size: 14px;
  color: #4b7dab;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="info">
  <div class="container">
    <div class="row w-100">
      <div class="address col-md-4 col-12">
        <i class="bi bi-geo-alt"></i>
        <h4>Location:</h4>
        <p>KIST Hospital Road, 44700</p>
      </div>
      <div class="email col-md-4 col-12">
        <i class="bi bi-envelope"></i>
        <h4>Email:</h4>
        <p>[email protected]</p>
      </div>
      <div class="phone col-md-4 col-12">
        <i class="bi bi-phone"></i>
        <h4>Call:</h4>
        <p>+1 55234 5112 33s</p>
      </div>
    </div>
  </div>
</div>

Puedes ver mejor los resultados en este enlace.

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.