Can't figure out how to change navbar in bootstrap 4

Question

Using Bootstrap 4.

I have this HTML for navbar:

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Home </a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2 my-sm-0" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
    </form>
    <button *ngIf="!isSignedIn" (click)="signIn()" class="btn btn-danger my-2 my-sm-0" type="submit">SignIn</button>
      <button *ngIf="isSignedIn" (click)="signOut()" class="btn btn-danger my-2 my-sm-0" type="submit">SignOut</button>
  </div>
</nav>

In collapsed state it looks like this:

If I remove navbar-brand (Home), I get this:

Question 1: for some reason the "Expand" is moved to the left side

When I click to expand I get this:

In full mode I get this:

What I want is:

The Expand button (the hamburger icon) to stay on the right side even when I remove the navbar-brand text.
The red SignOut button to be on the right side.
The Search Form with Search button to stay on the left side with NO navbar-brand (Home) text
And the last thing - is it possible to make the entire navbar a little thinner, using bootstrap only? I know this can be done with css.

Please advise. Thank you!

Carol Skelly · Accepted Answer · 2018-11-12T22:53:28.697

Use ml-auto (margin-left:auto) to push the buttons to the right...

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2 my-sm-0" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        <button class="btn btn-danger my-2 my-sm-0 ml-auto" type="submit">SignOut</button>
    </div>
</nav>

https://www.codeply.com/go/UG0l2aoHNs

Also see: Bootstrap 4 align navbar items to the right

score 0 · Answer 2 · answered Nov 12 '18 at 18:56

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <!-- You will need to add a non breaking space '&nbsp;' so when you remove the nav-band the hamburger icon holds in place-->
    <a class="navbar-brand" href="#">Home </a> &nbsp;

    <!-- Add mr-0 class to the hamburger icon to set its margin right to 0px-->
    <button class="navbar-toggler navbar-toggler-right mr-0" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Place the form in a navbar-nav class then ensure the form has a nav-item class-->
      <ul class="navbar-nav mr-auto">
        <form class="form-inline nav-item">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </ul>
      <!-- Add the 2 buttons in a nav-item -->
      <ul class="navbar-nav my-2 my-lg-0">
        <li class="nav-item ">
          <button *ngIf="!isSignedIn" (click)="signIn()" class="btn btn-danger mr-1" type="submit">SignIn</button>
        </li>
        <li class="nav-item pt-sm-1 pt-xs-1">
          <button *ngIf="isSignedIn" (click)="signOut()" class="btn btn-danger" type="submit">SignOut</button>
        </li>
      </ul>
    </div>
  </nav>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

Here is a code spinet for answers 1, 2, 3. Not sure you can achieve question 4 from bootstrap only.

Please check on Bootstrap Navbar, Bootstrap Spacing and Non-Breaking SPace &nbsp

Can't figure out how to change navbar in bootstrap 4

2 Answers2