How to insert a button right of the breadcrumb elements in Bootstrap 4?

Question

I have the following breadcrumbs in use:

<ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item active">My Account</li>
</ol>

Now what I want is to insert a button on the same line as the breadcrumbs, but have it float: right, like:

Home  /  My Account    < ---------- Space goes here ---------- >    Button

I tried the following, but it doesn't work:

<ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item active">My Account</li>

    <span style="float: right;">
      <li class="breadcrumb-item">
        <button class="btn btn-sm btn-success">
          Create New User
        </button>
      </li>
    </span>

</ol>

Also I tried to use the bootstrap class float-right with no result.

How could I place the button on the same line with the breadcrumbs but float it right? Also there should be no slash / between the last breadcrumb and the button.

Answer 1

One solution would be to take the button out of the ol and position it absolutely. This would require you to wrap the ol and button in a container and set position:relative; on the container:

.nav-container {
  position:relative;
}
button {
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav-container">
  <ol class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="#">Home</a>
      </li>
      <li class="breadcrumb-item active">My Account</li>
  </ol>
  <button class="btn btn-sm btn-success">Create New User</button>
</div>

Answer 2

Here's a simple approach using bootstrap 4 util classes:

<div class="breadcrumb d-flex justify-content-between align-items-center">
  <ol class="breadcrumb mb-0 p-0">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active">My Account</li>
  </ol>

  <button class="btn btn-sm btn-success">Create New User</button>
</div>