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

Popular posts from this blog

How to provide Authorization & Authentication using Asp.net, C#? -

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

How to use Authorization & Authentication in Asp.net, C#? -