html - How do I line up my button in twitter bootstrap -

hi im trying line button horizontally "inline" wont let me. know btn-group cant have space in between buttons want because they're attached 1 another. im trying align them horizontally without btn-group here code:

<footer class="bottom visible-phone">    <div class="container">       <div class="row text-center">    <div class="span1"><a class="btn btn-primary btn-small" href="#">   <div class="icon-user icon-white"></div> facebook</a></div>    <div class="span1"><a class="btn btn-info btn-small" href="#">   <div class="icon-user icon-white"></div> twitter</a></div>    <div class="span1"><a class="btn btn-danger btn-small" href="#">   <div class="icon-user icon-white"></div> youtube</a></div>    <div class="span1"><a class="btn btn-small" href="#">   <div class="icon-user"></div> instagram</a></div> </div><!--row end--> </div><!--container end--> </footer> 

in bootsrap, grid system (span, row, container) make span's appear underneath eachother 'phone' size (which guess case here, due visible-phone class added footer). won't able rely on grid system this...

there .inline class available use on ul: http://twitter.github.io/bootstrap/base-css.html#lists

this means reformatting of markup (which make sense anyway), should able achieve desired result, without writing single line of css yourself:

<footer class="bottom visible-phone">     <div class="container">         <div class="row text-center">             <ul class='inline span12'>                 <li><a class="btn btn-primary btn-small" href="#">                     <i class="icon-user icon-white"></i> facebook</a>                 </li>                 ...             </ul>         </div>         <!--row end-->     </div>     <!--container end--> </footer> 

in fact wrappers (footer, container, row) not required here, kept them present in code. code <ul> (without .span12) </ul> should do.

for example, have @ this: http://jsfiddle.net/jrm3z/1/