'Bootstrap 5 float-end causing issue with flex elements

When I add the class float-end it pushes the button to right but the div tags next to that comes front of it.

enter image description here

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="col-md-7 bg-white shadow-sm rounded-3 mx-3 ">
  <div>
    <a href="#" class="btn btn-sm btn-primary m-2 mr-0">
      Edit  <i class="bi bi-pencil"></i>
    </a>
  </div>
  <div class="d-flex p-2 justify-content-between border-bottom">
    <div class="fw-bold">Pan no</div>
    <div class="text-secondary">not added</div>
  </div>
  <div class="d-flex p-2 justify-content-between border-bottom">
    <div class="fw-bold">Birthdate</div>
    <div class="text-secondary">not added</div>
  </div>
</div>
csstwitter-bootstrapbootstrap-5


Solution 1:[1]

I fixed it by adding the "clearfix" class to button's parent div.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="col-md-7 bg-white shadow-sm rounded-3 mx-3 ">
  <div class="clearfix">
    <a href="#" class="btn btn-sm btn-primary m-2 mr-0">
      Edit  <i class="bi bi-pencil"></i>
    </a>
  </div>
  <div class="d-flex p-2 justify-content-between border-bottom">
    <div class="fw-bold">Pan no</div>
    <div class="text-secondary">not added</div>
  </div>
  <div class="d-flex p-2 justify-content-between border-bottom">
    <div class="fw-bold">Birthdate</div>
    <div class="text-secondary">not added</div>
  </div>
</div>

Solution 2:[2]

Here, in the overview section Float - Bootstrap v5.0

Please be aware float utilities have no effect on flex items.

Note that float will will make it pop to the left-most or right-most position in the parent element. so you must add clearfix to the parent element.

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 isherwood
Solution 2 Go3shom

Related Questions