Trouble arising from Bootstrap 5's float-end on flex items

When I apply the float-end class, it shifts the button to the right, but the div tags next to it appear in front of it.

https://i.sstatic.net/Mxu0P.png

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d3c8d7c8d5">[email protected]</a>/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

Answer №1

To resolve the issue, I included the "clearfix" class in the parent div of the button.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a292e7fce3fce1">[email protected]</a>/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>

Answer №2

Exploring the overview section, you can find more information on Float - Bootstrap v5.0

It's important to note that float utilities do not affect flex items.

Keep in mind that using float will shift the element to the far left or right within its parent container, requiring you to include clearfix on the parent element.

Answer №3

Hello there, I am presenting you with two choices

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353263d223d20">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- Option one -->
<div class="col-md-7 bg-white shadow-sm rounded-3 mx-3 ">
   <div class="position-relative">
      <div class="position-absolute top-0 end-0">
          <a href="#" class="btn btn-sm btn-primary m-2 mr-0">
             Edit 
          </a>
      </div>
  </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>
<br>
<!-- Option two -->
<br>
<div class="col-md-7 bg-white shadow-sm rounded-3 mx-3 ">
  <div class="float-start col-10 p-2">
    <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>
  <div class="float-end col-2 p-2">
      <a href="#" class="btn btn-sm btn-primary d-flex justify-content-center align-self-center">
         Edit 
      </a>
  </div>
  <div class="float-start col-12 p-2">
    <div class="d-flex p-2 justify-content-between border-bottom">
      <div class="fw-bold">Addres</div>
      <div class="text-secondary">not added</div>
    </div>
    <div class="d-flex p-2 justify-content-between border-bottom">
      <div class="fw-bold">Zip Code</div>
      <div class="text-secondary">not added</div>
    </div>
    <div class="d-flex p-2 justify-content-between border-bottom">
      <div class="fw-bold">City</div>
      <div class="text-secondary">not added</div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating responsive images when using two images stacked on top of each other:

One of my challenges with using Bootstrap is trying to place an image on top of another image. Here's the HTML code I currently have: <section id="test"> <div class="row"> <div class="imgbg"><img src="img/bg_pres.png ...

cssbootstrap-4

Words appear on the screen, flowing smoothly from left to right

I am trying to create a hover effect where a caption appears when an image is hovered over. The text should slide in from left to right, causing the container to grow along the X axis as the image is hovered over. I have managed to make the text appear on ...

csscss-transitions

Addressing the Summer Note Problem within a Bootstrap Popup

I am currently facing an issue with the functionality of the Summernote Text plugin in my project. The text inside the Summernote editor does not display what I am typing until I resize the browser window. Below is the code snippet for reference: <%-- ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Issue regarding custom CSS implementation in Angular project

Being a French speaker, I apologize in advance for any mistakes I might make. I am also fairly new to Angular, so if you could provide detailed explanations in your responses, it would be greatly appreciated. Thank you. I am trying to import a custom CSS ...

htmlcssangulartypescript

The fluid table within the Bootstrap container is not adapting to different screen

Can't figure out why the bootstrap container fluid table is not responsive. Even though I used an example of My First Bootstrap Page that works fine and is responsive, this particular table remains unresponsive. I want to avoid using a scroll but will ...

phphtmlcssbootstrap-4

Picture shown in the sidebar

I'm dealing with a table that has only one row containing text with new-line characters, such as: <td id='line-numbers'> <span class="number" id="1">1</span><br> <span class="number" id="2">123</span>< ...

htmlcss

CSS inline-block element disregarding margins and padding

Recently, I've been delving into the world of CSS and trying out "display:inline-block" as an alternative to "display:float". The general consensus from documentation is that properties commonly used on block elements can also be applied to inline-blo ...

marginpaddingcss

Tips for customizing the appearance of an HTML dropdown menu

Here is the code snippet: <select name="xyz" id="abc"> <option value="x">10/Page</option> <option value="y">20/Page</option> <option value="z">30/Pa ...

htmlcss

The website is showing up blank when accessed on mobile devices

One of the websites we recently worked on used to appear correctly on iPhone and Blackberry, but now it shows up as blank on both devices. Interestingly, the site still displays as usual on iPad even though we never created a specific mobile version for ...

htmlcssiosmobile

Understanding the hierarchy of LESS css class structure is crucial for

In my chat contact list, each contact can have a different state represented by classes: .online .offline .online .selected .offline .selected Here are the corresponding styles (example): .online { background-color: #fff; p { color: #000; } } . ...

cssless

Ways to navigate through a webpage without encountering any overflow issues

My window is too small to scroll, but I still need the ability to do so. Is it possible to scroll even when the height of the container is not large enough to display the scrollbar? Below is the code I am using to achieve scrolling: setTimeout(function() ...

javascriptjqueryhtmlcss

Having trouble understanding how to create a continuous loop for a CSS animation within the KreatureMedia Layerslider

Currently, I am using KreatureMedias Layerslider and trying to make a fullwidth wave bob up and down. This is what I have at the moment... <img class="ls-layer" data-ls="durationin:1500;scalein:1.1;offsetxin:-50;loopcount:-1;loopoffsetx:0sw;loopoffset ...

jqueryhtmlcssanimationplugins

The Nivo Slider is stealthily concealing my CSS Menu

Although this question has been previously asked, I am still unable to make it work with the solutions provided; The website in question is I have tried changing the z-index on all menu items to 99999, but they are still appearing below. <div id="sli ...

jqueryhtmlcssnivo-slider

Tips for increasing the size of the SVG icon within Material UI iconButtons

Have you experimented with creating webpages using react.js along with the Material UI library? How can I adjust the size of an SVG icon? Recently, I developed a "create new" component, which consists of a material paper element with an add button on top. ...

csssvgreactjsmaterial-designmaterial-ui

The CSS syntax definition for list styles

Inside the body of my site is this code: Here is the HTML: <ul id="navlist"> <li class="first"> <a href="/" id="current">Home</a> </li> <li> <a href="/Store/">Store</a> </ ...

htmlcsssyntax

The issue of CSS and PHP header include file not adjusting to device size and exceeding the full width of the screen

This included code is a snippet from a header file for a website. <head> <link rel="shortcut icon" href="favicon.ico"> <meta charset="utf-8" /> <title>Test Site | Foo The Bar </title> <link rel="stylesheet" href="csss_stan ...

phpcssmobile

What is the method for adjusting the font size of the label in an Angular mat-checkbox element?

I've been trying to adjust the font size of a mat-checkbox's label, but no matter what I do, the component's default styles keep overriding my changes: Using !important Trying ::ng-deep Applying a global style in styles.scss <mat-checkb ...

cssangularangular-materialangular-forms

Numerous lists conveniently consolidated within a single navigation bar

I am currently exploring the functionality of StumbleUpon's navigation bar by attempting to replicate it. My approach involves using 3 lists within 1, structured like this: <nav role="navigation"> <ul id="rightnav"> & ...

htmlcssnavigation

Encountering issues with integrating Sass into Angular 4

Hi there! I recently started a new project in Angular 4 and encountered some issues with the Sass styling. Every time I try to add sass and run the project, I keep getting this error message: body{ h1{ color : red; } } ^ Invalid ...

cssangularsass

What methods can be used to pause a jQuery function when hovering and resume it when the mouse leaves?

I'm currently working on a jQuery function that operates on the mousemove event. The goal is to have two images - one main image and one shadow image, with the shadow image reflecting movement based on mouse position. While everything is functioning p ...

javascripthtmlcss