CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcol
Madeirense
Madeirense

Reputation: 87

Boostrap horizontal gaps between cols issue

I'm using Bootstrap collapse to create some panels as in the picture below. However, I'd like the vertical spacing between these panels to be always the same independently of their height closed or expanded:

enter image description here

Below is an example of the structure of these panels. So all panels share the same code apart from the content bit.

<div class="homepageWidget col-md-6 contact-widget ui-sortable-handle" order="1," id="reportsWidget" data-description="List of reports">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                Work Reports
                <div class="box-icons">
                    <a href="#" class="list-icons-item" data-toggle="collapse">
                        <span class="chevron-up-icon"></span>
                    </a>
                    <span class="expand-icon hidden-xs hidden-sm"></span>
                    <span class="move-icon hidden-xs hidden-sm"></span>
                </div>
            </h3>
        </div>
    </div>
 </div>

The problems here is the col-md-6. As each of them is on a col-md-6 and their height varies the vertical spacing between cols won't be the same.

Is there a way to achieve this and still maintain the move, expand and close panel functionality?

Upvotes: 0

Views: 34

Answers (0)

Related Questions