0

I'm a newbie and would like to ask how do you position navbar items to the right in Bootstrap 4? I tried the solutions here Bootstrap 4 - Right Align Navbar Items but did not work.

I trying to understand the sample code from Bootstrap 4 and don't what is making the search form align to the right?

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="#">Hidden brand</a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <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="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

mr-auto does not align nav items to the right using the below,

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler40" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> 
            <span class="navbar-toggler-icon"></span> 
        </button>             

        <div class="collapse navbar-collapse" id="navbarToggler40"> 
            <a class="navbar-brand" href="#">Hidden brand</a> 
            <ul class="navbar-nav mt-2 mt-lg-0 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="#">Link</a> 
                </li>                     

                <li class="nav-item"> 
                    <a class="nav-link disabled" href="#">Disabled</a> 
                </li>                     

                <li class="nav-item dropdown"> 
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                                    Dropdown link                                </a> 
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
                        <a class="dropdown-item" href="#">Action</a> 
                        <a class="dropdown-item" href="#">Another action</a> 
                        <a class="dropdown-item" href="#">Something else here</a> 
                    </div>                         
                </li>                     
            </ul>                                  
        </div>             
    </nav>
html5student
  • 11
  • 2
  • 6
  • What is it exactly that you are trying to align to right? You had this question: _What is making the search form align to the right?_ So it is the `.mr-auto` set on the tag that precedes the form. – dferenc Dec 10 '17 at 21:07

1 Answers1

0

It is the .mr-auto class set on the navbar menu (the <ul> tag) that pushes the form to the right.

The #navbarTogglerDemo01 tag has 3 immediate children: the <a>, <ul> and <form> tags. Normally they all would be left aligned, but the class mentioned above set the right margin of the <ul> tag to auto. This is the actual css stlye:

.mr-auto {
    margin-right: auto !important;
}

You can read more on this under the Spacing utilities section of the Bootstrap 4 docs.

Update in response of the comment:
Consider the example below. Apart from the color scheme, the only difference between the two navbars is the usage of the .mr-auto class. The upper one uses it, and has the form pushed to the right end, while the lower navbar does not use it, thus the form stands next to the menu items. 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="#">Hidden brand</a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <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="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>


<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <a class="navbar-brand" href="#">Hidden brand</a>
        <ul class="navbar-nav mt-2 mt-lg-0">
            <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="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

So in case you would like to align the entire menu to the right, than you have two easy options. The example below uses the .mr-auto class on the branded <a> tag. Your another option could be to change the .mr-auto class to .ml-auto on the <ul> element.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <a class="navbar-brand mr-auto" href="#">Hidden brand</a>
        <ul class="navbar-nav mt-2 mt-lg-0">
            <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="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
dferenc
  • 7,918
  • 12
  • 41
  • 49