🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
← Back to Questions
Ask Question
Not satisfied by the Answer? Still looking for a better solution?
Ask Question

Bootstrap align navbar items to the right

How do I align a navbar item to right?

I want to have the login and register to the right. But everything I try does not seem to work.

This is what I have tried so far:*
<div> around the <ul> with the atribute: style="float: right"
<div> around the <ul> with the atribute: style="text-align: right"
tried those two things on the <li> tags
tried all those things again with !important added to the end
changed nav-item to nav-right in the <li>
added a pull-sm-right class to the <li>
added a align-content-end class to the <li>

*This is my code:
<div id="app" class="container">

  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <a class="navbar-brand" href="#">Navbar</a>

    <ul class="navbar-nav">

      <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="#">Features</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Pricingg</a>

      </li>

    </ul>

    <ul class="navbar-nav " >

      <li  class="nav-item">

        <a class="nav-link" href="{{ url('/login') }}">Login</a>

      </li>

      <li  class="nav-item">

        <a class="nav-link" href="{{ url('/register') }}">Register</a>

      </li>

    </ul>

  </nav>

  @yield('content')

</div>
bootstrap-4 twitter-bootstrap css
by

2 Answers

rahul07 


<ul class="navbar-nav ml-auto">
sandhya6gczb
In Bootstrap 5 (see this question), ml-auto has been replaced with ms-auto to represent start instead of left. Since the Navbar is still based on flexbox, auto margins OR flexbox utility classes are still used to align Navbar content.

For example, use me-auto...


<nav class="navbar navbar-expand-lg navbar-light bg-light">

    <div class="container-fluid">

        <a class="navbar-brand" href="#">Brand</a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarContent">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">

                    <a class="nav-link active" href="#">Home</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">Link</a>

                </li>

            </ul>

            <ul class="navbar-nav">

                <li class="nav-item dropdown">

                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu </a>

                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">

                        <li><a class="dropdown-item" href="#">Action</a></li>

                        <li><a class="dropdown-item" href="#">Another action</a></li>

                    </ul>

                </li>

            </ul>

        </div>

    </div>

</nav>

Login / Signup to Answer the Question.

LoginSignup