0

I'm trying to use the new version of Bootstrap for a personnal project. I tried to make a navbar, and I want the links to be aligned to the right, and I looked for a solution but I couldn't find how to do it. Here's my code 

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">taïho sushi</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Présentation</a>
            <a class="nav-item nav-link" href="#">Menu</a>
            <a class="nav-item nav-link" href="#">Contact</a>
        </div>
    </div>
</nav>
ShiroHaru __
  • 103
  • 1
  • 1
  • 5
  • Possible duplicate of [Align navbar item to the right in bootstrap 4 alpha 6](http://stackoverflow.com/questions/41513463/align-navbar-item-to-the-right-in-bootstrap-4-alpha-6) – Carol Skelly Feb 20 '17 at 00:30

2 Answers2

3

Use the new ml-auto class which sets margin-left:auto and pushes the content to the right.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">taïho sushi</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
            <a class="nav-item nav-link active" href="#">Présentation</a>
            <a class="nav-item nav-link" href="#">Menu</a>
            <a class="nav-item nav-link" href="#">Contact</a>
        </div>
    </div>
</nav>

Demo on Codeply

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

use navbar-right class

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">taïho sushi</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav navbar-right">
            <a class="nav-item nav-link active" href="#">Présentation</a>
            <a class="nav-item nav-link" href="#">Menu</a>
            <a class="nav-item nav-link" href="#">Contact</a>
        </div>
    </div>
</nav>
Shihab
  • 199
  • 1
  • 16
  • it seems that the problem should be another, because its working here. – Shihab Feb 19 '17 at 18:35
  • 1
    navbar-right is deprecated in VS 4 alpha 6. [Now ml-auto](http://stackoverflow.com/questions/41513463/align-navbar-item-to-the-right-in-bootstrap-4-alpha-6) is used. – Carol Skelly Feb 20 '17 at 00:33