Home / Questions / 523413
Accepted
Franqo Balsamo
Asked: 2022-08-24 08:39:52 +0800 CST 2022-08-24 08:39:52 +0800 CST

Place button to the right of the navbar, but to the left on mobile devices

  • 772

I was testing bootstrapand I have run into this situation: following the documentation demo I have tried to position the logout button to the right of navbarwhen the screen is maximized (in case the design is responsive or the screen is x size and the menu icon is activated, the logout button must be on the left) but for reasons unknown to me, it has not worked.

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery cdn -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-dark">
  <a class="navbar-brand" href="#" style="color: white;">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation" style="background-color: white;">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <form class="form-inline my-2 my-lg-0" method="post" action="@Url.Action(" LogOff ", "Home ")">
      <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Cerrar sesión</button>
    </form>
  </div>
</nav>

I tried adding the attribute style="float:right"but I didn't get the result I expected, the button always appears on the left. What is the correct way to do it?

Later I tried these two options:

Option A:

    <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo03">
        <form class="form-inline my-2 my-lg-0" style="float:right;" method="post" action="@Url.Action("LogOff", "Home")">
            <div class="navbar-nav ml-auto">
                <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Cerrar sesión</button>
            </div>
        </form>
    </div>

Option B:

And applying the in the<form class="form-inline my-2 my-lg-0"formjustify-content-end" etc>

While these last two options fix the problem by shrinking the screen and showing the menu icon, the logout button stays on the right and in this case I want it to be on the left.

html

2 Answers

  1. Best Answer

    Simple: you must add the ml-auto class to the form:

    You should review the flex section in the Bootstrap documentation.

    <!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery cdn -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-dark">
  <a class="navbar-brand" href="#" style="color: white;">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation" style="background-color: white;">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <form class="form-inline my-2 my-lg-0 ml-auto" method="post" action="@Url.Action(" LogOff ", "Home ")">
      <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Cerrar sesión</button>
    </form>
  </div>
</nav>

    • 2

  2. You can do the following:

    <div class="div collapse navbar-collapse d-flex justify-content-lg-end justify-content-sm-start" id="navbarTogglerDemo03">
     <form class="form-inline my-2 my-lg-0" method="post" action="@Url.Action(" LogOff ", "Home ")">
           <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Cerrar sesión</button>
     </form>
 </div>

    What we do is, tell the container div that in lg it is placed on the right with justify-content-lg-end while in sm inclusive or smaller, it will be placed on the left.

    • 1