Move search bar to second line for medium screens with Bootstrap 4

Question

This navigation bar uses Bootstrap 4. For medium screens (768px to 991px), I would like the search bar and button to be moved to the second line, as it is on large screens and above. Currently, on medium screens the search bar squishes up next to the other navigation links:

How it looks on large/extra large screens:

Updated code per first answer suggestion:

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-navbar">
    <div class="container">
        <a class="navbar-brand" href="/" style="align-children: middle">
        <span class="" aria-hidden="true"></span>
            Example
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#site-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="sr-only">Toggle navigation</span>
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse ml-auto" id="site-nav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="/">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/agencies/">Agencies</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/meetings/">Meetings</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/agenda/">Agenda</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/documents/">Documents</a>
                </li>
            </ul>
            <form class="form-inline mt-3 mb-3" role="search" action="/search/" method="post">
                <div class="btn-group">
                    <input type="text" name="request" class="form-control" placeholder="Search Documents">
                    <button type="submit" class="btn search-button">Search</button>
                </div>
            </form>
        </div>
    </div>
</nav>

score 1 · Answer 1 · answered Dec 10 '18 at 23:34

Put the contents of the search form in a btn-group, which should keep them together:

        <form class="form-inline mt-3 mb-3" role="search" action="/search/" method="post">
            <div class="btn-group" role="group" aria-label="Basic example">
                <input type="text" name="request" class="form-control" placeholder="Search Documents">
                <button type="submit" class="btn search-button">Search</button>
            </div>
        </form>

Carol Skelly · Accepted Answer · 2018-12-11T12:34:01.197

You can use the responsive flexbox direction utils. For example, flex-column flex-xl-row on the navbar-collapse.

<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/" style="align-children: middle">
        <span class="" aria-hidden="true"></span>
            Example
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#site-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="sr-only">Toggle navigation</span>
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse ml-auto align-items-start align-items-xl-center flex-column flex-xl-row" id="site-nav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="/">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/agencies/">Agencies</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/meetings/">Meetings</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/agenda/">Agenda</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/documents/">Documents</a>
                </li>
            </ul>
            <form class="form-inline ml-2" role="search" action="/search/" method="post">
                <div class="form-group">
                    <input type="text" name="request" class="form-control" placeholder="Search Documents">
                </div>
                <button type="submit" class="btn search-button">Search</button>
            </form>
        </div>
    </div>
</nav>

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

Note: You're using navbar-expand-md so the Navbar will collapse into the toggler on sm. If you want to instead show the stacked menu/form on md you should reduce the navbar expand to sm.

Also see: Bootstrap 4 navbar with 2 rows

I think you mean "you should *increase* the navbar expand to *lg*" (to show the toggler on medium screens) — nCardot, Dec 13 '18 at 00:10

Move search bar to second line for medium screens with Bootstrap 4

2 Answers2