How to achieve a 3 Column and Footer Layout
I am trying to build this footer using bootstrap 3.3. The footer looks like this:
Left Text - Social Icons - Right Text
Here's what I've 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>
+3
source to share
1 answer
You forgot to put columns inside a row
div.
Bootstrap has 12 system columns, so the sum of your columns should be 12
.
Thats why i used 3
size columns 4
.
JSFiddle work .
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>
+4
source to share