Bootstrap: CardHeader with buttons on the right

Using style is not best practice.

Try to add float-right to the class.

So it'll be like:

<button class="btn btn-primary float-right" (click)="onAddCategoieModal(content)">Edit</button>

Hope it helps!

Hey I believe this is what you are trying to accomplish. All I did was add container-fluid to the class with your card-header div, and then I added a row to contain your bootstrap columns and it seems to have fixed it.

<div class="card-header container-fluid">
  <div class="row">
    <div class="col-md-10">
      <h3 class="w-75 p-3">{{categorie.name}}</h3>
    </div>
    <div class="col-md-2 float-right">
      <button class="btn btn-primary" 
(click)="onAddCategoieModal(addCategorieModal)">Add</button>
      <button class="btn btn-primary" style="margin-left: 1em" 
(click)="onAddCategoieModal(content)">Edit</button>
     </div>
  </div>
</div>

Here's a codepen. If that's not doing exactly what you were wanting, could you clarify with what else you were wanting it to do?

Another example with less HTML.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<h5 class="card-header d-flex justify-content-between align-items-center">
  Title
  <button type="button" class="btn btn-sm btn-primary">Button</button>

  <!-- Wrap with <div>...buttons...</div> if you have multiple buttons -->
</h5>

Another option is to use flex. This might be a bit of a cleaner solution.

<div class="card-header">
  <div class="d-flex align-items-center">
    <h3 class="mr-auto p-3">{{categorie.name}}</h3>
    <div class="btn-group" role="group">
      <button class="btn btn-primary" (click)="onAddCategoieModal(addCategorieModal)">Add</button>
      <button class="btn btn-primary" style="margin-left: 1em" (click)="onAddCategoieModal(content)">Edit</button>
    </div>
  </div>
</div>

Also, you might want to consider ditching that inline margin for predefined class like ml-1.