-1

How can I align link to right side of navbar in bootstrap-4. Below is my code:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="mr-auto">
    <div class="float-right">
      <ul class="navbar-nav">
        <li class="nav-item mr-3">
          <a href="#"><i class="fa fa-commenting-o text-light fa-lg"></i></a>
        </li>
        <li class="nav-item mr-3">
          <div class="dropdown">
            <a id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-ellipsis-v text-light fa-lg"></i>
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenu">
              <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>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

I want comment icon and vertical ellipsis icon to shift at right hand side of navbar

Jane Doe
  • 1
  • 1
  • 2
  • 1
    Perhaps explain what you have tried? – wwkudu Aug 25 '17 at 06:57
  • LOL! Are you trying to be SARCASTIC ? What I have tried is right above in question and is explained in much better way with `Run Code Snippet` blue button. – Jane Doe Aug 25 '17 at 07:01
  • 1
    Lol, not sarcastic at all. Just want to help you get an answer more quickly. It's just that it takes much longer to help people when you have to debug their code from scratch. You've provided all the code, but not really given any of the story/your thinking up to this point. – wwkudu Aug 25 '17 at 07:05
  • The duplicate *does* answer your question: [demo](https://www.codeply.com/go/cqLxwVZcvu) Read it carefully, and the [Bootstrap docs](https://getbootstrap.com/docs/4.0/components/navbar/) because your navbar is not correctly constructed with `float-right` and `mr-auto` divs. – Carol Skelly Aug 25 '17 at 10:45

1 Answers1

0

Does this answer your question?

Add mr-auto to the class you wish to align right and remove navbar-expand-lg from your nav class.
Codepen Example

Francisco Flores
  • 290
  • 2
  • 16