1

I am trying to build a responsive design in Bootstrap 3 with float left and float right elements.

I am currently using this to create the effect:

  <h3 class="pull-left>Dashboard</h3>
    <div class="pull-right">        
      <a href="#" class="btn" style="white-space:normal;">Sample Filter Button With Varying Text</a>                  
    </div>   
  <div class="clearfix"></div> 
</div>

This works fine on a larger screen, however, when you go to a smaller screen (mobile), the pull-right element breaks to a new line and remains 'right aligned' on the page.

How do I make it left aligned when it breaks to this new line? Bearing in mind that the contents of the element are dynamic and will have dynamic width.

friek108
  • 1,064
  • 1
  • 12
  • 23
  • 1
    possible duplicate of [Bootstrap 3: pull-right for col-lg only](http://stackoverflow.com/questions/19404861/bootstrap-3-pull-right-for-col-lg-only) – Turnip Jun 05 '15 at 10:53
  • You could roll your own `pull-right-sm / md / lg` etc. classes. There is an answer [here](http://stackoverflow.com/a/29094312/746736) that may be helpful – Turnip Jun 05 '15 at 10:54
  • [This thread](https://github.com/twbs/bootstrap/issues/13690) suggests that this will be coming in Bootstrap v4 – Turnip Jun 05 '15 at 10:55
  • The above solutions would work if I specified it by screen size, but given that the `pull-right` aligned element has dynamic width, those solutions don't really work - as stated, it would align left when the `pull-right` element **breaks to a new line** – friek108 Jun 12 '15 at 00:54

0 Answers0