How do I get the nav bar to align to right in Bootstrap

Question

I can't get the navigation menu on the right hand side using Bootstrap, like with most modern websites.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarText">
                      <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="#">Features</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Pricing</a>
                        </li>
                      </ul>
                      <span class="navbar-text">
                        Navbar text with an inline element
                      </span>
                    </div>
                  </nav>

Also the hamburger menu has gone to the left and should be on the right...

For the content inside ul(navbar-nav) to be left aligned, just replace mr-auto to ml-auto. mr stands for margin-right and ml for margin-left. You can read more about spacing here, https://getbootstrap.com/docs/4.3/utilities/spacing/ Regarding the alignment of hamburger, please show your css code or working sample. By default bootstrap navbar-toggler should be left aligned. — Sebastian Devassy, Sep 25 '19 at 04:07
I now want to hover over the tabs, to have a background-colour show but only on the non active tabs. I don't want it to appear on the active tab (if this all makes sense...) I did this: .nav-item.active:hover{ background-color: no colour; border-radius: 0.25em; } .nav-item:hover{ background-color: #e1e1e1; border-radius: 0.25em; } — user1924813, Sep 25 '19 at 11:28
Achieved what I set out to do (somewhat) as I had to use :focus instead of :hover and border-bottom: 1px etc instead of background-color to show the selected link. :focus not working on Safari as it does on Chrome posed a problem, which made me use tag and CSS which would make the textarea look like a rectangle (not editable). I had to put anchor tags in HTML before the textarea tag to make it work. It looks very amateurish, but gets the job done! Any idea how to get :focus working better on Safari? — user1924813, Sep 25 '19 at 16:03

score 0 · Answer 1 · answered Sep 25 '19 at 04:12

0

use

<ul class="navbar-nav ml-auto">

instead of

<ul class="navbar-nav mr-auto">

answered Sep 25 '19 at 04:12

Muhammad Aftab

1,098
8
19

score 0 · Answer 2 · answered Sep 25 '19 at 04:15

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
  <div class="collapse navbar-collapse mr-auto" id="navbarText">
    <ul class="navbar-nav ml-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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
                        Navbar text with an inline element
                      </span>
  </div>
</nav>

See code result in Full page Mode

score 0 · Answer 3 · answered Sep 25 '19 at 06:14

please use <ul class="navbar-nav ml-auto"> to align you menu items right in desktop.

and add ml-auto class to your navbar-toggler class list to align your toggle button to the right side.

for more explanation see Snippet.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse mr-auto" id="navbarText">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Privacy</a>
        </li>
      </ul>
    </div>
  </nav>
</body>
</html>

Thank You...

How do I get the nav bar to align to right in Bootstrap

3 Answers3