8

This is my code:

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

I'm trying to not only align the links to the right but also give each one a spacing so they are not directly next to each other.

I know I can float it right and give it isn't own CSS but im trying to avoid using custom CSS, is there any css classes or html markup I can add from bootstrap to get this effect without having to add custom rules?

5 Answers 5

17

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>

The list-inline utility places everything in a single line using inline-block with extra padding. It is a Bootstrap utility.

4

class pull-right will float them right

<footer class="pull-right">
4
  • And the spacing between the items, should I make them a list, would that give me the spacing?
    – J.Zil
    Commented Jul 24, 2014 at 13:36
  • Also I only want the links on the right not the whole footer
    – J.Zil
    Commented Jul 24, 2014 at 13:37
  • if you want just links then give each of them a class pull-right <a href="#" class="pull-right"> if you want spacing I think the best way is to make you css with some margin
    – neno
    Commented Jul 24, 2014 at 13:41
  • don't do that with inline classes...see my answer using CSS. I just updated my answer to move only links to the right.
    – Dan
    Commented Jul 24, 2014 at 13:41
3

Try this

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 your <p> tag then just put the <a> tags within the <p> tag as shown here.

2

The Class .pull-right will align the div into right corner

Try this

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

This will solve your iniline display as well.

Good Day

2

With Bootstrap v5.0: https://getbootstrap.com/docs/5.0/utilities/float/

<div class="float-start"> </div>
<div class="float-end"> </div>
<div class="float-none"> </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.