What's the best way to place my image inside a Bootstrap Accordion so that it is housed within the accordion-item?

I've been facing an issue with a Bootstrap Accordion. Everything works fine, except when I try to insert an image

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

into an accordion-item

<div class="accordion-item">

The image doesn't fit properly within the area like the text does. I have created a sample pen to demonstrate this. The second accordion-item has a thin grey top border [like any following items]. Adding text to the first accordion-item causes that border to move down, as expected. However, adding an image doesn't increase the accordion-item height accordingly and the image overlaps.

I hope you can clearly see what I'm experiencing in the example pen provided.

Can someone please assist me and tell me what I might be doing wrong?

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

Thank you

htmlcssbootstrap-5accordionbootstrap-accordion

Answer №1

If you are using the "float-***" class for positioning, it is important to also include the "clearfix" class after the floating class in order to clear the row.

For example, adding the following code after the image will achieve the desired result:

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

By doing this, your layout will be exactly as intended.


          <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>

To understand more about the usage of "float and clear," you can refer to the following link: https://www.w3schools.com/css/css_float.asp

Answer №2

Try adjusting the display property of the accordion-body div to either grid or flex. This simple change opens up a world of styling possibilities and customization options that can help resolve your issue.

.accordion-body {
  font-size: var(--custom-font-size);
  font-weight: var(--custom-font-weight);
  display: grid;
}

To learn more about flexbox, check out this resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

Material UI button component does not have the applied class

I'm encountering an issue with applying a CSS class (redirectButton) to a Material UI button. Despite my efforts, the class is not being successfully applied. Below is the HTML code in question: {(isDataAdapterAdmin && !dataSources?.length) & ...

htmlcssreactjsmaterial-ui

Display a sneak peek on a separate tab

I have an editor on my website where users can input and edit their own HTML code. Instead of saving this to a database, I want to display the current user's HTML code in a new window using JavaScript. How can I achieve this without storing the code p ...

javascriptasp.nethtml

Semantic UI Troubles: Unraveling the Sidebars and #pusher Defects

Hey there, I could really use some assistance with an issue I'm facing. I have this particular structure that's causing me trouble. <div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed"> ... </div> < ...

javascriptjqueryhtmlcss

A concise way to write an else if statement in Javascript and jQuery

Is there a way to make this code more concise? It works perfectly fine, but it's too lengthy. Basically, the code involves two dropdown lists where the user selects options, and based on their selection, values appear in two textboxes. The catch is th ...

javascriptjqueryhtml

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4

Utilizing Bootstrap 3, I can effortlessly create a responsive table with adjustable columns using the grid system. Additionally, I have the ability to hide certain columns on smaller devices. For instance, consider this example where the table consists of ...

csstwitter-bootstrapresponsivenessbootstrap-4

Displaying content on a click event in AngularJS

I am facing an issue with the ng-show directive not working as expected when a user clicks on an icon. The desired behavior is that the parent div should initially display content, but when the play icon is clicked, the contents of the div should become ...

javascripthtmlangularjs

What is the method for locating all anchor tags "In General" within the inner HTML of a div using XPath?

This query is related to a discussion on anchor tags in this thread. I am interested in identifying all anchor tags within a string. The scenario provided below is similar to the aforementioned issue, however, I aim to accomplish this using xpath and angu ...

javascripthtmlxpath

Tips for starting the debugging process with POST and GET requests in Django and the Python Shell

I've encountered an issue with my code where the database is not updating and a new record is not being created. I suspect that there may be a problem with how I am handling the POST data retrieval in my script. Can anyone provide guidance on where to ...

htmldjangopostgresqlpostget

Having trouble implementing an onClick event to change a button's CSS to href in Vue.js

When working with a SinglePageApp and using UIKit (UKit), I have found that I need to use a <button> tag instead of an <a> tag. Previously, the <a> tag was written like this: <a type="button" class="uk-button uk-button-link" href="#e ...

cssvue.js

Echo result triggers a color change in the table cell

Working on a piece of code that should change the background color of the first td element based on ping results. If success, it becomes green; if failed, it turns red. The issue I'm facing is that while I can display images or use different methods ...

phphtmlcss

Steps for splitting a numbered list and adding an image above each item:

I have a challenge I'm trying to tackle with my list: My goal is to create a long, numbered list that is divided into different sections I also want to include an image within each list item and have it display above the numbered title of the sectio ...

htmlcss

Keep table header stationary while accommodating varying column widths

I have come across various solutions for freezing a table header row, such as creating a separate table containing only the header and hiding the header of the main table. However, these solutions are limited to cases where column widths are predetermine ...

htmlcsshtml-table

Conceal form after submission - Django 1.6

I'm currently working on a Django 1.6 project where I have this form: <form action="/proyecto/" method="POST" id="myform"> {% csrf_token %} <table> <span class="Separador_Modulo">& ...

javascriptjqueryhtmldjango

Looking to add the Ajax response data into a dropdown selection?

Looking to add select options dynamically, but unsure how to retrieve response values. I am able to fetch all the values in the response, but I struggle with appending them correctly in the select option. I believe the syntax is incorrect. success: funct ...

javascripthtmlajaxlaravel

Utilizing loop variables in ng-class and ng-click directive

This piece of code generates a list consisting of seven thumbnails, with the currently active image designated by the active and thumb classes. <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]"> <img ng-src="images/{{no}}t.jpg" class="thumb" ng ...

javascriptcssangularjs

What is the title of a document that is linked behind an HTML link?

I am seeking a way to automatically retrieve documents from web pages using a Python script. The links in the HTML pages appear as follows: href="https://foo.bar/view.php?id=123456" When clicked on in a web browser, these links open the document with its ...

phppythonhtmlhttp

Unable to position the button next to the search bar

I'm struggling to get my search bar aligned next to my dropdown button. I've tried various alignment methods without success. Both buttons are within a container, causing the search bar to span 100% of the container's width. I also attempted ...

htmlcssbuttonbootstrap-4

Is it possible to create a stylish box for an HTML form?

I'm trying to figure out how to put a form inside a box or have a border around it, but I'm stuck. I want the background to be white and was considering using a transparent option. Are there any experts out there with some simple ideas on how to ...

htmlformstextboxborder

Create a JavaScript code snippet that replaces the innerHTML of the function document.getElementById with

In my limited knowledge of JavaScript, I have come across an issue with the following code: function example() { document.getElementById("example").innerHTML = "<script>document.write(example)</script>"; } Unfortunately, this code doesn&ap ...

javascripthtmlinnerhtml

The navigation bar on the website highlights vibrant green arrows next to the

I'm having trouble implementing a bootstrap menu on my website using the code provided by Bootstrap. The menu is not displaying correctly and instead showing small green UL arrows. I have JavaScript and Bootstrap scripts in my project. Is there a way ...

htmlcssasp.net-mvctwitter-bootstrap