What are the best solutions for resolving inconsistent column spacing within a bootstrap accordion card header?

I am experiencing a spacing issue with my Bootstrap 4 accordion. The issue arises when the text in the second column of each card header row increases in length, causing inconsistent spacing between the columns. This inconsistency is particularly noticeable on card 2B with the text "FORMS COMPLETED". How can I ensure that the spacing remains consistent and even across all columns?

<!-- ###### Accordion ###### -->
            <div class="accordion" id="activityAccordion">
                <!-- Card 1 -->
                <div class="card py-0 m-1">
                    <div class="card-header p-1" id="heading1">
                        <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
                            <div class="row p-0 m-0 text-left">
                                <div class="col-3 pl-0 pr-1 py-0 m-0 ">02/04/2019</div>
                                <div class="col-3 col-3 pl-0 pr-1 py-0 m-0" style="color:#1aa2c1">Phone Call</div>
                                <div class="col-md-6 pl-0 pr-1 py-0 m-0" style="text-transform:none">Followed up on smart goals</div>
                            </div>
                        </button>
                    </div>
                    <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#activityAccordion">
                        <div class="card-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                    </div>
                </div>
                <!-- / end  Card -->
                <!-- Card 2 -->
                <div class="card py-0 m-1">
                    <div class="card-header p-1" id="heading2">
                        <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                            <div class="row p-0 m-0 text-left">
                                <div class="col-3 pl-0 pr-1 py-0 m-0">01/25/2019</div>
                                <div class="col-3 col-3 pl-0 pr-1 py-0 m-0" style="color:#01c16d">Interview</div>
                                <div class="col-md-6 pl-0 pr-1 py-0 m-0" style="text-transform:none">Took PCL-5, GAD-7, and PIL</div>
                            </div>
                        </button>
                    </div>
                    <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#activityAccordion">
                        <div class="card-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore we...
                        </div>
                    </div>
                </div>
                <!-- / end  Card -->
                <!-- Card 2B -->
                <div class="card py-0 m-1">
                    <div class="card-header p-1" id="heading2B">
                        <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapse2B" aria-expanded="false" aria-controls="collapse2B">
                            <div class="row p-0 m-0 text-left">
                                <div class="col-3 pl-0 pr-1 py-0 m-0">01/12/2019</div>
                                <div class="col-3 col-3 pl-0 pr-1 py-0 m-0" style="color:#bea623">Forms Complete</div>
                                <div class="col-md-6 pl-0 pr-1 py-0 m-0" style="text-transform:none">Parents signed consent to treat, intake complete</div>
                            </div>
                        </button>
                    </div>
                    <div id="collapse2B" class="collapse" aria-labelledby="heading2B" data-parent="#activityAccordion">
                        <div class="card-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, ...
                        </div>
                    </div>
                </div>
                <!-- / end  Card -->
                <!-- Card 3 -->
                <div class="card py-0 m-1">
                    <div class="card-header p-1" id="heading3">
                        <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                            <div class="row p-0 m-0 text-left">
                                <div class="col-3 pl-0 pr-1 py-0 m-0">01/10/2019</div>
                                <div class="col-3 col-3 pl-0 pr-1 py-0 m-0" style="color:#a90092">Counseling</div>
                                <div class="col-md-6 pl-0 pr-1 py-0 m-0" style="text-transform:none"&g...
                        </button>
                    </div>
                    <div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#activityAccordion">
                        <div class="card-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus.tztam amet consectetur adipisicing elit Modo maxime fugiat hic eaque tenetur iure.Blanditiis nihil ex ratione dictandundimendae aut vitae optio voluptatum similique possimus,dolorum doloremque,libero neque vel.solut rem sit!upitate repellatibus dolore vist quam.l...nvfotur.mon vinoficianding.rn cambios perspPublicy que incvuncia abinverear sus interchms y necesidades.yracken debe ir detrás del visado.e no angubemarcroolr proposicioneon Sunnyyefferve erit propusidenteianceonevo.Unidad educativitas viaorganization.Este proceso inteduas inusto crecion de la unidpropuesprtenecerTodo el peraxequipeta1do aceptaciongenetiaccionproxima ignapiquazaar.Foscurillo dibretadioniieviceambiinstrumentobilissubresa internaciebolindente ProppositierbUna vecebrofyment relie…machitometionvinterror.alimentacion.mineriasmerprotacambio jelectricidad logienciaituapoyo44.esaline heaphene.implantercullorecimiento cotab…
                        </div>
                    </div>
                </div>
                <!-- / end  Card -->
                <!-- Card 4 -->
                <div class="card py-0 m-1">
                    <div class="card-header p-1" id="heading4">
                        <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collaps...
htmlcssbootstrap-4accordion

Answer №1

The reason for the increased spacing is due to having a <div class='row'> inside the button element. The button's width adjusts based on its content, causing it to give its width to child rows and columns. This results in the <div class='col-3'> not having the same width as another card with a different amount of text inside the button. To address this issue, you can set a fixed width on the button using CSS:

.btn{
    width:700px !important;
}

Answer №2

With the help of @Alex, I was able to identify that the button class's formatting structure was causing interference with the columns. To ensure responsiveness, I decided against using a fixed width. Instead, I eliminated the button style from the accordion and replaced it with a link style.

 <!-- ###### Accordion ###### -->
            <div class="accordion" id="activityAccordion">
                <!-- Card 1 -->
                <div class="card py-0 m-1">
                    <div class="card-header p-1" id="heading1">
                        <a class="collapsed" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
                            <div class="row p-0 m-1 text-left">
                                <div class="col-2 p-0 m-0">02/04/2019</div>
                                <div class="col-3 p-0 m-0 text-uppercase" style="color:#1aa2c1">Phone Call</div>
                                <div class="col-md-7 p-0 m-0">Followed up on smart goals</div>
                            </div>
                        </a>
                    </div>
                    <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#activityAccordion">
                        <div class="card-body">
                            (Content for Card 1)
                        </div>
                    </div>
                </div>
                <!-- / end  Card -->
                <!-- Additional Cards have similar structure as above -->
            </div>
<!-- / end  Accordion -->

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

Works well with Bootstrap but not compatible with other frameworks

Looking for assistance with a code within Bootstrap (HTML and CSS). I have been trying to create a dropdown menu (burger menu) following the Bootstrap Documentation, but I am unable to expand the burger menu (Dropdown). I have tested it on both Firefox an ...

htmlcss

Following the addition of a row that includes select and input fields, it appears that the functionality of the select and input

After appending a div.row using dropdown selection within another div and making it sortable using the Kendo Sortable method in jQuery, the elements are loading correctly. However, the select options are not displaying, and the input field is not accepting ...

javascripthtmljquerybootstrap-4kendo-ui

No changes occur within this JavaScript code

I am currently working on a piece of Java Script code: document.onreadystateChange = function() { if (document.readystate === "complete") { var menu = document.getElementsByClassName('menu'); var b0 = menu[0]; b0.addE ...

javascripthtml

Creating a custom function in a Node.js application and rendering its output in the front-end interface

I've been trying to scrape data from a website and display it using innerHTML, but I'm running into some issues. The code snippet I'm using is: document.getElementById('results').innerHTML = searchJobs(''); However, I ke ...

javascripthtmlnode.jsexpress

Looking for a way to trigger PHP mail when a form is submitted rather than on page load without relying on If...POST conditions?

I have a PHP mail code that successfully sends an email message when the page loads, but I need it to send on form submission on the same page. I have searched for solutions, but due to the specific code I am using, I couldn't figure it out. This pag ...

phphtml

Navigate through a filtered list of parent items with the use of cursor arrows in AngularJS

My form contains an input with a dropdown, where I display JSON data like this: { "title": "Parent #1", "child" : [ {"title": "Child ##1"}, {"title": "Child ##2"}, {"title": "Child ##3"}, {"title": "Child ##4"} ...

javascripthtmlangularjs

Adjusting the content of a single text box by typing in another

Is it feasible to automatically convert a Nepali date input in one textbox into an English date and display it in another textbox without any page refresh? I have a PHP function that can translate dates between Nepali and English, and I want it to execute ...

phpjavascriptjqueryhtmlajax

Is there a way for me to retrieve and display the current value of my range input on the console as I adjust it?

Trying to figure out how to console log the value of a range input every time it is moved. What Event handler should I use for this task? <input class="range-slide" type="range" min="0" max="10" value="0" ...

javascripthtmldom

Layering an HTML page on top of another

I am trying to display one HTML page on top of another. I attempted to link the other page within a div, following the example on this page: However, when clicked, the control navigates to the linked page instead of overlaying it on the current page. Can ...

jqueryhtmlcss

Accessing Azure Remote App using an HTML5 clientConnectionFactory

Currently, I am exploring the options for connecting to Azure Remote Apps using an HTML5 client. However, I am facing difficulty in finding a way to connect to the Azure server that hosts the remote apps. I have a specific question about Azure Remote App ...

htmlazureremote-accessgateway

Issue with line wrapping due to padding-left in IE7

My <font> element is having line wrapping issues in IE7, where padding-left:30px; or margin-left:30px only affect the first line. Unfortunately, since it's a web-app, I can't replace the <font> element with something else like a div. ...

htmlcssinternet-explorer-7

Changing the element to "position: absolute" prevents it from stretching to the full width

After styling my login page to perfection with the container div set to display: block and position: static, I encountered an issue when attempting to switch to display: inline-block or position: absolute. The container div stopped adhering to its maximum ...

htmlcsscss-position

Removing the empty option in a select dropdown

I am facing an issue with the code below: <select id="basicInput" ng-model="MyCtrl.value"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3"& ...

javascriptangularjshtmlselectangular-ngmodel

Troubleshooting problem with media queries in CSS

As a newbie to HTML and CSS, I've been encountering difficulties with media queries. My website seems to only function properly when viewed in a resolution of 1920x1080, so I attempted to implement some media queries in my CSS to cater to other resolu ...

htmlcss

What is the method of posting to PHP using JavaScript without utilizing Ajax?

My current code involves a drag and drop file uploader to PHP using ajax, but it seems that my web host does not support ajax. Is there an alternative method to achieve this without using ajax? Specifically, I am facing issues with the UploadFile functio ...

phpjavascriptajaxhtml

Enjoy the convenience of accessing your QR code result with just a click on the link provided

Stumbled upon this code snippet on . It allows scanning QR codes and displaying the results as plain text. However, I wanted the result to be a clickable link, like www.google.com/(qrcodescanresult). <script src="html5-qrcode.min.js">< ...

javascripthtml

Encountering a 404 error while loading CSS in a Django application

I'm currently in the process of developing a chatbot application. I'm encountering issues with loading the CSS for the frontend using django's static data load feature. Here are the file paths: CSS path: C:\Documents\Django_Works ...

pythonhtmlcssdjango

The transparency of the TABLE must only be applied to a specific section

I need the table to have a transparent bottom and a clear top for better readability. Here is my attempted solution: .preview { background: -moz-linear-gradient(top, rgba(255,255,255,0) 25%, rgba(255,255,255) 100%); background: -webkit-gradie ...

css

Show items in the sequence of clicking

Is there a way to display elements in the order they're clicked, rather than their order in the HTML using jQuery? For example: CSS code: .sq{ display:none; } HTML Code: <a href="#" id="1">A</a> <a href="#" id="2">B</a> ...

javascriptjqueryhtmlcss

The div's height is failing to adjust based on the content it contains

My div with the class .list-holder in the header is not adjusting its size based on the content within the div. When I increase the padding of the list items, the content overflows outside the div. I have included the Bootstrap CDN. .list-holder { ...

htmlcssbootstrap-4