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
    el 5 sep. 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
    el 5 sep. 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.