Bootstrap: .float-right doesn't work inside a .row

Created on 12 Mar 2018 · 11Comments · Source: twbs/bootstrap

The button in the HTML below (codepen.io) remains left-aligned despite the float-right class.

<!DOCTYPE html>
<html>
<head>
  <title>.float-right issue</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <style>.row { background-color: #ff8621; }</style>
</head>
<body>
  <div class="container">
    <div class="row">
      <button class="btn btn-primary float-right">To the right!</button>
    </div>
  </div>
</body>
</html>

Firefox 58.0.2, linux/amd64

docs v4

Source

opennota

Most helpful comment

I am afraid, it cannot work, as floats in flexbox context don’t work by principle. But you can achieve floating behaviour by adding margin: auto in desired direction. So in your case (to let the element float right) add margin-left: auto to it. Adding .ml-auto on the button, should get you there.

See example here: https://stackoverflow.com/a/36606694/2296044

Kout on 12 Mar 2018

👍31 🎉7 🚀2 😄2

All 11 comments

See example here: https://stackoverflow.com/a/36606694/2296044

Kout on 12 Mar 2018

👍31 🎉7 🚀2 😄2

@Kout In this case I think it should be documented somewhere or other.

opennota on 12 Mar 2018

👍1

Also, the float-right class doesn't have to use the float CSS property internally.

opennota on 12 Mar 2018

@opennota You mean something like:

.float-right {
    float: right !important;

    . row > & {
        margin-left: auto !important;
    }
}

Well, it deserves more discussion and thinking. Personally I am not up for it. It is kinda workaround/hack which can cause more harm than good in the end. Simply: don’t expect floats to work inside flexbox.

Kout on 12 Mar 2018

The problem is floating doesn't work like flex-boxes auto margins. Take https://codepen.io/anon/pen/aYOrMO for example, the DOM order is 1, 2. But if you float of these right then the order becomes 2, 1. Whereas if you auto-margined to push them to the right, they'll retain their DOM position. So, I think it's a bad idea to assume .float-right on flex works the same way as `.float-right' on non-flex items.

kevinruscoe on 12 Mar 2018

You can use order classes (.order-) with auto-margin.

danijelGombac on 12 Mar 2018

👍2

@kevdotbadger These are exactly my worries of mixing two principles: flexbox and floats. I think nowdays with even better support of CSS grid, float should be really used mostly for its original purpose: floatning blocks inside text. For layout it’s been a hack (very clever though).

@opennota Looking again at your code: why do you use .row actually? If there is just button it should be direct child of the .container. In terms of how the BS grid system works, there should be “only” .col-s as direct descendants of the .row element. Think of it as ul (~ .row) and li (~ .col).

Kout on 12 Mar 2018

@Kout
My concern is that the documentation on floats doesn't say anything about it not working well with the new flex/grid system.

opennota on 12 Mar 2018

@opennota Is that the documentations' problem though? Flex and float generally don't work well together anyway. There's a couple of assumptions here:

1 - The developer knows enough about CSS to know the quirks
2 - The developer doesn't know enough about CSS to use flex and float together.

I don't think we need to hand-hold the developer and tell them what doesn't work well together.

kevinruscoe on 12 Mar 2018

👍3

Not the documentation's fault IMO, but I'm always open to changes to help clarify. Few things, though:

In our grid docs, we explicitly state only columns can be immediate children of rows. Your opening example has a row for no reason and a button within. Ditch the row, and you can float.
Float utilities are for the float property. Internally, they must use that CSS and nothing else.
Utilities are immutable, they cannot change based on their parent's context.
Lastly, float and flex are two different layout approaches. They don't mix, and they require some background knowledge for the history there.

So, all told, only thing we could do is on the float utilities page is to mention floats don't mix with miscellaneous layout modules (flex, likely grid, probably table, etc).

mdo on 12 Mar 2018

👍2

@mdo

So, all told, only thing we could do is on the float utilities page is to mention floats don't mix with miscellaneous layout modules (flex, likely grid, probably table, etc).

SGTM.

opennota on 12 Mar 2018

Was this page helpful?

0 / 5 - 0 ratings