move div to the right in bootstrap

Question

I am quite a beginner and it is the first time I am using a Bootstrap Template. I have a division in the navbar that contains the links to two other pages and I would like to align both on the right.

Here is my code:

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="add.html">Add Entry</a>
    </li>
  </ul>
</div>

I tried including div class="collapse navbar-collapse pull-right", div class="collapse navbar-collapse to-right", div class="collapse navbar-collapse float-right". I know I can do it in CSS but I was wondering if there is another way.

Thank you for your answers in advance!

score 0 · Answer 1 · answered Feb 05 '18 at 19:03

I think you can use ml-auto to push items to the right, have a lot at this answer Bootstrap 4 align navbar item to the right

try:

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item ml-auto">
        <a class="nav-link" href="add.html">Add Entry</a>
      </li>
    </ul>
  </div>

move div to the right in bootstrap

1 Answers1