Align elements left and right with proper wrapping

Question

I am new to HTML/CSS, I am struggling to figure out how I can get a button toolbar to align to the right, but then stop floating right (wrap around as an inline-block would) when the page width gets smaller?

Currently, I'm floating the buttons right to get the right-aligned effect I want, but floating might not be the best way.

I could use media queries but I was wondering if anyone knows of a more straightforward/standard way?

http://jsfiddle.net/47hsddLd

<div style="margin: 60px 20px 60px 20px;">
  <div style="display:inline-block">
    <h3>Some kind of page title</h3><br />
  </div>
  <div class="btn-group pull-right" role="group" aria-label="User Categories" style="display:inline-block">
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="ReadLater" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Read Later">
      <i style="margin-top:4px" class="glyphicon glyphicon-bookmark" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="PlanToUse" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Plan To Use">
      <i style="margin-top:4px" class="glyphicon glyphicon-pushpin" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Used" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Used">
      <i style="margin-top:4px" class="glyphicon glyphicon-check" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Submitted" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="My Stories">
      <i style="margin-top:4px" class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>
    </button>
  </div>
</div>

I didnt completely get your question. Float is fine unless you want them as a separate row, in whcih case you can use text-align right on the buttons wrapper element. — Arathi Sreekumar, Jun 13 '16 at 15:02
@ArathiSreekumar I want them to be a single row. But, if the width is smaller, I want the buttons to wrap without continuing to float right. If you look at my fiddle and drag the divider to shrink the width, you'll see that the buttons drop to a new line under the title but continue to float off to the right — Michael, Jun 13 '16 at 15:04
Yes, in that case, media queries might be the way to go. But you do have the problem of the title length being an unknown. You could do a combination of the solution I have given below and media queries. — Arathi Sreekumar, Jun 13 '16 at 15:07

score 2 · Accepted Answer · edited May 23 '17 at 12:08

2

If you inspect the element you'll see this generated by Bootstrap.

.pull-right {
    float: right !important;
}

So override that to float:none or left in the media queries for small screens. You'll need to apply !important too if needed.

EDIT

As suggested in the comments below, it's likely not a good idea to override .pull-right class directly, as it also being used for other rules, so .this-parent-class .pull-right {...} would be better, or don't use that class at all.

Since you're using Bootstrap, you really should take the advances of the built in responsive grid system, i.e. col-lg-* , col-md-* and col-sm-* etc for your layout, there is a great post here.

edited May 23 '17 at 12:08

Community

1
1

answered Jun 13 '16 at 15:04

Stickers

75,527
23
147
186

So media queries are one of the simplest way to go to achieve this? – Michael Jun 13 '16 at 15:05
@Michael yes, I would do that within media queries. – Stickers Jun 13 '16 at 15:06
IMO, better thing would be to remove the `pull-right` of bootstrap and use custom class to manage different styles on breakpoints. I think we should avoid unnecessary overriding of bootstrap classes. – Mr_Green Jun 13 '16 at 15:15
@Mr_Green agreed, the answer just helps OP to identify the issue, I will updated with more suggestions in a moment. – Stickers Jun 13 '16 at 15:25

Arathi Sreekumar · Answer 2 · 2016-06-13T15:12:28.860

Float is fine unless you want them as a separate row, in which case you can use text-align right on the buttons wrapper element. Also moving the buttons to above the title text makes the title text wrap.

<div style="margin: 60px 20px 60px 20px;">
  <div class="btn-group pull-right" role="group" aria-label="User Categories" style="margin-left: 10px">
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="ReadLater" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Read Later">
      <i style="margin-top:4px" class="glyphicon glyphicon-bookmark" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="PlanToUse" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Plan To Use">
      <i style="margin-top:4px" class="glyphicon glyphicon-pushpin" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Used" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Used">
      <i style="margin-top:4px" class="glyphicon glyphicon-check" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Submitted" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="My Stories">
      <i style="margin-top:4px" class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>
    </button>
  </div>
  <div>
    <h3>
        Some kind of page title
    </h3>
    <br />
  </div>

</div>

eg: http://jsfiddle.net/47hsddLd/2/

but that would make it read differently for screen readers.

Please note I removed the display: inline-blocks, since those break the normal flow.

Here is a solution with media-queries: http://jsfiddle.net/47hsddLd/4/

RwwL · Answer 3 · 2016-06-13T15:32:34.120

1

Sounds like you want it this way: http://jsfiddle.net/zsjn7tz8/

Basic approach is flexbox with flex-wrap: wrap turned on, flex:1 on the space-filling element, and white-space: nowrap on both flex children.

Note that for some browsers, you may want/need CSS preprocessing or autoprefixing to get "legacy" and "tweener" flexbox syntaxes working, plus vendor prefixing (it's a hot mess: strongly advise letting a tool do it, not authoring yourself)

edited Jun 13 '16 at 15:32

answered Jun 13 '16 at 15:16

RwwL

3,298
1
23
24

Thanks! this does exactly what I want. but i am worried about the backwards compatibility of flexbox. so i may have to use media queries – Michael Jun 13 '16 at 15:26
I would highly encourage starting to use Flexbox in production; it's becoming very common, and it's pretty easy to write fallback styles (e.g., via Modernizr) to handle crappy browsers a little differently. And remember the most important question of front-end dev work: http://dowebsitesneedtolookexactlythesameineverybrowser.com/ ;^D – RwwL Jun 13 '16 at 15:30

Align elements left and right with proper wrapping

3 Answers3