Can the Bootstrap 4 classes form-inline and float-sm-right not be combined?

Question

HTML:

<form class="form-inline float-sm-right">
  <input type="text" class="form-control" placeholder="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>

This is from an example using Bootstrap v4.alpha2. (I already found out that float- should be used, instead of pull- :(

But it does not work in Bootstrap v4.0.0; that I have installed using bower.

What is the solution, to get the form on the right edge? Or can the classes not be combined?

I must say: Bootstrap pretends to make styling easier, but for me, it is getting worse and worse -- so many changes between versions :-(

Edit: I will give you the whole code block:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="nav-main">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Features</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Pricing</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">About</a>
    </li>
  </ul>
  <form class="form-inline float-sm-right">
    <input type="text" class="form-control" placeholder="Search">
    <button class="btn btn-outline-success" type="submit">Search</button>
  </form>
</nav>

Hopefully, with everything bootstrap v4.0.0 compatible!

is there other code? what is the form-inline container? – Tom Michew Mar 20 '18 at 14:55 — Tom Michew, Mar 20 '18 at 14:55

Carol Skelly · Accepted Answer · 2018-03-20T15:44:14.590

19

The Bootstrap 4 Navbar is flexbox, so float won't work for alignment. The easiest method is to use auto-margins to push the form to the right. Just use ml-auto which is margin-left:auto;...

https://www.codeply.com/go/Xhdz5MQIDS

<nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="nav-main">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Features</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Pricing</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">About</a>
    </li>
  </ul>
  <form class="form-inline ml-auto">
    <input type="text" class="form-control" placeholder="Search">
    <button class="btn btn-outline-success" type="submit">Search</button>
  </form>
</nav>

Related question:
Bootstrap 4 align navbar items to the right

edited Mar 20 '18 at 15:44

answered Mar 20 '18 at 15:33

Carol Skelly

351,302
90
710
624

You are thé bootstrap specialist; this is the answer. But to me it proves also how much of a pain in the neck it is to migrate from bootstrap 3, 4 alpha, 4 bèta to v4.0.0 ! – Ad Rienks Mar 20 '18 at 15:49
this link will help you to understand this concept in better https://getbootstrap.com/docs/4.0/utilities/spacing/ – The EasyLearn Academy Feb 23 '19 at 03:57
@TheEasyLearnAcademy - how so? this has nothing to do with the spacing utils – Carol Skelly Feb 23 '19 at 14:48

score 7 · Answer 2 · answered Mar 20 '18 at 14:58

If you put everything inside a Bootstrap column, it works as expected:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<div class="container">
    <div class="row">
        <div class="col-12">
            <form class="form-inline float-sm-right">
                <input type="text" class="form-control" placeholder="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</div>

Can the Bootstrap 4 classes form-inline and float-sm-right not be combined?

2 Answers2