Menu icon Foundation
how do i "pull-right" on a header?

just wondering how i can do a "pull-right" on a header. i'm coming from bootstrap and i was able to do the following

 

<h4>
  This is my title...
  <span class="pull-right">
    <a href="" class="btn btn-default"><i class="fa fa-wrench"></i> edit</a>
  </span>
</h4>

so basically i have a title text and then i want to display an edit link pushed/pulled to the far right. i tried "right" class and it doesn't seem to work. is there something comparable? or should i approach it a different way? thanks.

pull rightheading

just wondering how i can do a "pull-right" on a header. i'm coming from bootstrap and i was able to do the following

 

<h4>
  This is my title...
  <span class="pull-right">
    <a href="" class="btn btn-default"><i class="fa fa-wrench"></i> edit</a>
  </span>
</h4>

so basically i have a title text and then i want to display an edit link pushed/pulled to the far right. i tried "right" class and it doesn't seem to work. is there something comparable? or should i approach it a different way? thanks.

sherwin m over 1 year ago

here's my next attempt

<h4 class="clearfix">
    <div class="left">
      This is my title...
    </div>
    <div class="right">
      <a href=""><i class="fa fa-wrench"></i> edit</a>
    </div>
</h4>

it doesn't work either. the 2 divs stack on top of each other. do i just do row class and use columns? it's kind of a lot of code but if it's the only way i guess. any ideas?

Mario Rodriguez over 1 year ago

Try this:

<div class="clearfix">
    <h4 class="float-left">My Title</h4>
    <a class="float-right" href="#">My Link</a>
</div>