Arrange the elements of the Footer with Bootstrap

Navigation
0

A big greeting for everyone.

I'm doing a footer in Bootstrap , however I have a series of difficulties, since the text does not fit in the direction I want, in addition to that I do not work the hover , for the icons of the networks.

Annex an image of how I have left and another of how it is that I should stay.

 ...

Thank you very much, for helping me =). 

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>
    
asked by linjai 04.09.2017 в 05:45
source

2 answers

0

you had the code poorly implemented. The correct thing would be: 

.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

I pass your corrected code so you can see how it works. If something is missing or is not what you expected, tell me and tell you.

In bootstrap there is the class .text-right to align to the right. 

@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>
    
answered by 05.09.2017 / 12:04
source
0

I do not know what version of boopstrap you are using, but if it is 4 you use text-left to align it to the left in any case, you can use text-align, and to have the color muted remove the white color from the footer, the hover I would put .redes-social to img {whatever} but I'm telling you that it will hardly work unless you have two images and what you do is change one for another, if you want to do it cool use font-awsome and avoid loading the images, and so you simply put color

    
answered by 04.09.2017 в 07:47
Put the orientation of each html to the taste apache cordova Problem in changing a value in access