'Bootstrap: CardHeader with buttons on the right

I want to have a Cardheader with Some text on the left and two buttons on the right. This is my html:

<div class="card-header">
<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>

But the two buttons get displayed below the h3 like this:

Any Idea?

twitter-bootstrap

Solution 1:^[1]

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?

Solution 2:^[2]

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>

Solution 3:^[3]

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!

Solution 4:^[4]

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.

Solution 5:^[5]

I've added one more div with the bootstrap class float-right and cols which make it responsive.

<div class="card text-secondary border-primary mb-3">
  <div class="card-header">
    <div class="row">
      <div class="col-md-9">
        <h3>blog title</h3>
      </div>
      <div class="col-md-3">
        <div class="float-right">
          <button class="btn text-success mr-1">Add</button>
          <button class="btn text-danger">Delete</button>
        </div>
      </div>
    </div>
  </div>
  <div class="card-body">
    <p class="card-text">blog content</p>
  </div>
</div>

Solution 6:^[6]

you will also try this

<div class="card-header container-fluid">
 <div class="col-md-10">
        <h3 class="w-75 p-3">{{category.name}}</h3>
    </div>
    <div class="col-md-2 float-right">
        <button class="btn btn-primary" (click)="onAddCategoryModal(addCategoryModal)">add</button>
        <button class="btn btn-primary" style="margin-left: 1em" (click)="onAddCategoryModal(content)">edit</button>
    </div>
    </div>

Solution 7:^[7]

The answers didn't help me. So, I tried this:

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

<div class="col-12">
  <div class="card">
    <article class="card-body">
      <div>
        <button type="button" class="btn btn-sm btn-primary mt-3 mr-2"
              style="position: absolute; top: 0; right: 0">
          Button
        </button>
        <h5 class="card-title text-center">Title</h5>
      </div>
    </article>
  </div>
</div>

Solution 8:^[8]

You need to add a .row div before using the .cols.

<div class="card-header">
  <div class="row">
    ...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Chris Hitchcock
Solution 2
Solution 3
Solution 4	Community
Solution 5	Kiran Mali
Solution 6	Parasmal Prajapati
Solution 7	Jhonatan Serafim
Solution 8	ImTalkingCode

'Bootstrap: CardHeader with buttons on the right

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]