CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Konrad Viltersten
Konrad Viltersten

Reputation: 39058

Style for floating right in Bootstrap 4 doesn't work

In this fiddle, I can see that the search box is floated right, as supposed to. On my screen, it's not. In fact, it behaves as if I put the style to be float-xs-left or simply left the floating related styling out.

Not sure how to troubleshoot it, since I can't reproduce the problem. I've checked everything I could thing of on my system but it's a navbar, a top level component so there's very little that can be screwed up.

<form class="form-inline float-xs-right">
  <input class="form-control" type="text" placeholder="Stuff">
  <button class="btn btn-default" type="button">Click</button>
</form>

Before, I had the logo in div of class container-fluid and it was working as supposed to (pushing the stuff to the right). However, I needed to go for row for other reasons, hence landing in to this problem.

Does anybody recognize the misbehavior? What can I do to investigate further?

Upvotes: 3

Views: 5504

Answers (1)

Dekel
Dekel

Reputation: 62536

The problem is with the combination of the new bootstrap's grid system (which is based on flex) and the float-right that you wanted for the logo.

You can solve this by using

.navbar .row .form-inline.float-xs-right {
    position: absolute;
    right: 0;
}

Upvotes: 5

Related Questions