How do I include my image within a Bootstrap Accordion so it sits within accordion-item

Question

I am having problems with a Bootstrap Accordion. It functions fine, but when i attempt to load an image

<img src="https://placehold.co/600x400" class="img-fluid" />

within an accordion-item

<div class="accordion-item">

it does not fit within the area, like the text does. I've created an example pen to show. The second accordion-item has a thin grey top border/seperator [as would any following items]. Any text I add to first accordion-item causes that border to push lower, as you'd expect. But when I include an img it does not force the accordion-item height to increase, and the img sort of overlaps.

Hopefully you will see what I mean clearly with the exmaple pen.

Could someone please help and advice what I am doing incorrectly?

https://codepen.io/iamfnah/pen/KKEyjgP

thanks

Answer 1

When you used the "float-***" class for positioning you should also have to use "clearfix" class to after floating class for declare to clear row.

so if you gonna add

<div class="clearfix"></div>

after img, it will be done exaclty what you want.

          <div class="accordion-body">
              Consectetur adipiscing elit ut aliquam purus sit amet luctus. Sed velit dignissim sodales ut eu sem integer vitae. Etiam dignissim diam quis enim.Consectetur adipiscing elit ut aliquam purus sit amet luctus. Sed velit dignissim sodales ut eu sem integer vitae. Etiam dignissim diam quis enim.Consectetur adipiscing elit ut aliquam purus sit amet luctus. Sed velit dignissim sodales ut eu sem integer vitae. Etiam dignissim diam quis enim.
              <img src="https://placehold.co/600x400" class="shadow img-fluid ms-2 float-end">
              <div class="clearfix"></div>
          </div>

You can also check this explanation for "float and clear" usage; https://www.w3schools.com/css/css_float.asp