pull/float right not working in Bootstrap 4

Question

I have an angular app and I am using bootstrap and angular material to design it. I want to create a header to the app and I have 2 buttons in the header, one on the left and the other suppose to be on the right.

here is my component

<mat-toolbar>
  <mat-toolbar-row>
    <button mat-raised-button>
      <fa name="cog"></fa>
    </button>
    <button mat-raised-button class="float-right">
      <fa name="refresh"></fa>
    </button>
  </mat-toolbar-row>
</mat-toolbar>

Note: I've tried both pull-right and float-right.

to add bootstrap I installed bootstrap module and added it to style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "../node_modules/bootstrap/dist/css/bootstrap.css";

in addition I added ng-bootsrap module to my app and imported it in my app component

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MatButtonModule,
    AngularFontAwesomeModule,
    MatToolbarModule,
    NgbModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

however nothing seem to work and pull my button right, any ideas?

Answer 1

Bootstrap-4 removed pull-* classes.

Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right. - Booststrap

---

There are a couple of ways to align the last button on the right side.

1. Use d-flex and justify-content-between classes on the container of the buttons.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="d-flex justify-content-between">
  <button class="btn btn-primary">
      Cog
    </button>
  <button class="btn btn-primary">
      Refresh
    </button>
</div>

2. Use ml-auto on the last button.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="d-flex ">
  <button class="btn btn-primary">
      Cog
    </button>
  <button class=" btn btn-primary ml-auto">
      Refresh
    </button>
</div>

3. Use float-right on the last button. But it only works, if its parent is not flex and there is enough space.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<button class="btn btn-primary">
 Cog
</button>
<button class=" btn btn-primary float-right">
  Refresh
</button>
 

Update

Check the codes in this pen - codepen.