Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    Consider changing the display property of the accordion-body div to grid or flex. This adjustment allows for additional styling options and customization and it will solve your problem.

    .accordion-body {
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
  display: flex;
}

    More about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search