1

Un gran saludo para todos.

Estoy realizando un pie de página o footer en Bootstrap, sin embargo tengo una serie de dificultades, puesto que el texto no me queda en la dirección que deseo, adicionalmente a eso no me funciona el hover, para los iconos de las redes.

Anexo una imagen de como me queda y otra de como es que debería quedarme.

Como me queda ...Como debería quedarme

Muchisimas gracias, por ayudarme =).

footer {
	background-color:#1A1A1A;
	height: 50%;
  color: white;
  padding: 15px;
}

.main1 { 
  display:flex;
  margin:0 auto;
}

a img:hover {
    color: #fff;
}
<footer>
  <div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <h6 class="text-muted lead">CONTACTO:</h6>
            <h6 class="text-muted">
            Carrera 8h No. 166-71 Local 2<br>
            Santa Cruz de la Ronda.<br>
            Teléfonos: 3115988953 – 3112641818.<br>
            </h6>
        </div>
        <div class="col-xs-12 col-md-6">
        <div class="pull-right">
        <h6 class="text-muted lead">ENCUENTRANOS EN LAS REDES</h6>
              <div class="redes-footer">
                  <a href="https://www.facebook.com/"><img src="imagenes/facebook-2.png"></a>
                  <a href="https://twitter.com/"><img src="imagenes/twitter-2.png"></a>
                  <a href="https://www.youtube.com/"><img src="imagenes/youtube-2.png"></a>
              </div>
        </div>
        <div class="row"> <p class="text-muted small text-right">José Miguel, arte y belleza @2016.<br> Todos los derechos reservados.</p></div>
    </div>
  </div>  
</div>
</footer>

1
  • si lograste conseguir una respuesta concreta?
    – zerokira
    Commented el 5 sept. 2017 a las 12:56

2 respuestas 2

1

tenias el codigo mal implementado. Lo correcto seria:

.container
.row
  .col-xs-12 .col-md-6 .text-left
  .col-xs-12 .col-md-6 .text-right
.row
  .col-xs-12 .col-md-12 .text-right

Te paso tu código corregido para que veas como funciona. Si le falta algo o no es como esperabas coméntame y te digo.

En bootstrap existe la clase .text-right para alinear a la derecha.

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

footer {
	background-color:#1A1A1A;
	height: 50%;
  color: white;
  padding: 15px;
}

.main1 { 
  display:flex;
  margin:0 auto;
}

a img:hover {
    color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<footer>
  <div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-6 text-left">
            <h6 class="text-muted lead">CONTACTO:</h6>
            <h6 class="text-muted">
            Carrera 8h No. 166-71 Local 2<br>
            Santa Cruz de la Ronda.<br>
            Teléfonos: 3115988953 – 3112641818.<br>
            </h6>
        </div>

        <div class="col-xs-12 col-md-6 text-right">
            <h6 class="text-muted lead">ENCUENTRANOS EN LAS REDES</h6>
            <div class="redes-footer">
              <a href="https://www.facebook.com/"><img src="imagenes/facebook-2.png"></a>
              <a href="https://twitter.com/"><img src="imagenes/twitter-2.png"></a>
              <a href="https://www.youtube.com/"><img src="imagenes/youtube-2.png"></a>
            </div>
        </div>
    </div>
    <div class="row"> 

        <div class="col-md-12 text-right">
            <p class="text-muted small">José Miguel, arte y belleza @2016.<br> Todos los derechos reservados.</p>
        </div>
        
    </div>

    </div>
  </div>  
</div>
</footer>

1
  • 1
    Hola, muchas gracias me ha servido.
    – linjai
    Commented el 5 sept. 2017 a las 15:55
0

No se que version de boopstrap estas usando, pero si es la 4 usa text-left para que te alinie a la izquierda en cualquier caso, puedes usar text-align, y para que tenga el color muted quitale el color white del footer, el hover yo que tu pondria .redes-sociales a img{ lo que sea } pero ya te digo yo que dificilmente te va a funcionar a menos que tengas dos imagenes y lo que hagas sea cambiar una por otra, si quieres hacerlo guay usa font-awsome y evita cargar las imagenes, y asi simplemente le pones color

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.