html5 - How to achieve a layout with 3 columns and a footer -
i trying build footer bootstrap 3.3. footer looks this:
text left - social icons - text right
here tried: http://jsfiddle.net/bsumgcpk/1/
<div class="container black"> <div class="col-xs-6 col-sm-4 white"><p> copyright © 2014</p></div> <div class="col-xs-6 col-sm-4 white text-center"> <img src="icon-g-.png" alt="google+"> <img src="icon-twitter.png" alt="twitter"> <img src="icon-fb.png" alt="facebook"> </div> <div class="col-xs-6 col-sm-4 right"><p> right text</p></div> </div>
you forgot put columns inside row div.
bootstrap has 12 column grid system, sum of columns should 12.
thats why used 3 columns of size 4.
working jsfiddle.
p { color: white; } .black { background: #000; } .right { text-align:right; } <link href="http://www.kissingerassoc.com/~order-portal/css/bootstrap.min.css" rel="stylesheet"/> <div class="container black"> <div class="row"> <div class="col-xs-4 col-sm-4 white"> <p>copyright © bitphone.es 2014</p> </div> <div class="col-xs-4 col-sm-4 white text-center"> <img src="https://bitphone.es/wp-content/uploads/2015/07/icon-g-.png" alt="google+" /> <img src="https://bitphone.es/wp-content/uploads/2015/07/icon-twitter.png" alt="twitter" /> <img src="https://bitphone.es/wp-content/uploads/2015/07/icon-fb.png" alt="facebook" /> </div> <div class="col-xs-4 col-sm-4 right"> <p>right text</p> </div> </div> </div>
Comments
Post a Comment