CODEWITHSUNDEEP
bootstrap-4
farhany
farhany

Reputation: 1551

Bootstrap 4, can't align button to right

I'm using Bootstrap 4. I can't seem to right align the "Logout" button to the right:

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="{{ if eq .BaseURL "" }}/{{ else }}{{ .BaseURL }}{{ end }}">AppName</a>    
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link{{ if eq .Title "Home" }} active{{ else }}{{ end }}" href="{{ if eq .BaseURL "" }}/{{ else }}{{ .BaseURL }}{{ end }}">Push<span class="sr-only">{{ if eq .Title "Home" }}(current){{ end }}</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link{{ if eq .Title "SomeFunction" }} active{{ else }}{{ end }}" href="{{ .BaseURL }}/somefunction">SomeFunction<span class="sr-only">{{ if eq .Title "Inflight" }}(current){{ end }}</span></a>
        </li>
        <li class="navbar-item pull-right">
          <a class="nav-link{{ if eq .Title "Logout" }} active{{ else }}{{ end }}" href="{{ .BaseURL }}/logout">LogoutX<span class="sr-only"></span>{{ if eq .Title "Logoff" }}(current){{ end }}</span></a>
        </li>
      </ul>
    </div>
</nav>

Thanks!

Upvotes: 0

Views: 112

Answers (1)

Nisharg Shah
Nisharg Shah

Reputation: 19662

You can use mr-auto for ul and add logout option as sibling

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="{{ if eq .BaseURL "" }}/{{ else }}{{ .BaseURL }}{{ end }}">AppName</a>    
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link{{ if eq .Title "Home" }} active{{ else }}{{ end }}" href="{{ if eq .BaseURL "" }}/{{ else }}{{ .BaseURL }}{{ end }}">Push<span class="sr-only">{{ if eq .Title "Home" }}(current){{ end }}</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link{{ if eq .Title "SomeFunction" }} active{{ else }}{{ end }}" href="{{ .BaseURL }}/somefunction">SomeFunction<span class="sr-only">{{ if eq .Title "Inflight" }}(current){{ end }}</span></a>
      </li>
    </ul>
    <li class="navbar-item">
        <a class="nav-link{{ if eq .Title "Logout" }} active{{ else }}{{ end }}" href="{{ .BaseURL }}/logout">LogoutX<span class="sr-only"></span>{{ if eq .Title "Logoff" }}(current){{ end }}</span></a>
    </li>
  </div>
</nav>

HTML Version

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">AppName</a>    
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Push<span class="sr-only">Home</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">SomeFunction<span class="sr-only">Inflight</span></a>
      </li>
    </ul>
    <li class="navbar-nav navbar-item">
      <a class="nav-link" href="#">LogoutX<span class="sr-only">Logoff</span></a>
    </li>			
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions