Bootstrap 5 Content in Card header float left and right not working

January 11, 2022

I have a card made using Bootstrap 5.

Basically I’m trying to get a title on the left of the card header and a group of buttons on the right of the card header so this is what I’ve done:

<div class="card-header">
  <div class="float-start">
    <h3>title</h3>
  </div>
  <div class="float-end">
    <button class="btn btn-primary">Add</button>
    <button class="btn btn-primary">Edit</button>
  </div>
  </div>

For some reason the title and buttons are not in the header.

How do I do this properly using Bootstrap 5?

>Solution :

All card-* classes need a direct parent card class to work properly. Change your code to:

<div class="card">
  <div class="card-header">
    <div class="float-start">
      <h3>title</h3>
    </div>
    <div class="float-end">
      <button class="btn btn-primary">Add</button>
      <button class="btn btn-primary">Edit</button>
    </div>
  </div>
</div>