Bootstrap footer - how to align it to the right and give distance

Question

This is my code:

<footer>
        <p>© Company 2014</p><a href="#">Pricing</a><a href="#">Contact</a><a href="#">Terms</a>
</footer>

I try not only to align the links on the right, but also to give each of them a gap so that they are not directly next to each other.

I know that I can correctly swim and give it not my own CSS, but I try to avoid using custom CSS, are there any css classes or html markup that I can add from bootstrap to get this effect without adding special rules

Answer 1

See Bootply for a working example.

    <footer>
      <p class="pull-left">© Company 2014</p>
      <div class="pull-right">
          <ul class="list-inline">
             <li><a href="#">Pricing</a></li>
             <li><a href="#">Contact</a></li>
             <li><a href="#">Terms</a></li>
          </ul>
      </div>
    </footer>

list-inline , inline-block . Bootstrap.

Answer 2

.pull-right div

<footer class="pull-right">
        © Company 2014 | <a href="#">Pricing</a> | <a href="#">Contact</a> | <a href="#">Terms</a>
</footer>

.

Answer 3

the pull-right class will float right

<footer class="pull-right">

Answer 4

try it

CSS

footer a{
     float: right;
     margin-right: 30px;
     //you can adjust this margin to change spacing.  
     //you can also play around with using margin instead of margin-right
}

HTML

<footer>
     <p>© Company 2014</p>
     <a href="#">Pricing</a>
     <a href="#">Contact</a>
     <a href="#">Terms</a>
</footer>

Bootply Demo

If you want the links to be on the same line as the tag <p>, then just put the tags <a>in the tag <p>as shown here .