Grid and cards issues with Bootstrap

Question

I almost finish a very important part in my Django project by creating panels which contains some cards. I'm using Bootstrap 3 (BS3) and I integrated cards from BS4 to BS3.

I'm getting an issue and I would like to get your mind because the behaviour is a little bit weird.

My issue :

As you can see in the animated picture below, there is an offset when I open dropdown from Publication n°1 and Publication n°2. It creates an offset with cards from the second row.

[![enter image description here][1]][1]

My question is : How I can rewrite bootstrap part in my code in order to make a normal behaviour ?

What I would like to get for each card:

This is what I would like for each card : open the card > make an offset to the entire row below

[![enter image description here][2]][2]

What I have and I don't want as behaviour :

And don't have a behaviour like that :

[![enter image description here][3]][3]

My code :

This is my entire code :

{% for category in research_categories|dictsort:'name' %}
  <div class="panel-group accordion" id="accordion_{{ category.id }}" role="tablist"
       aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion_{{ category.id }}"
             href="#collapseOne_{{ category.id }}" aria-expanded="true" aria-controls="collapseOne">
            <i class="more-less glyphicon glyphicon-plus"></i>
            {{ category }}
            {% for item in category.publication.all %}
              {% if item.new_publication == True %}
                <span class="glyphicon glyphicon-flag"></span>
              {% endif %}
            {% endfor %}
          </a>
        </h4>
      </div>
      <div id="collapseOne_{{ category.id }}" class="panel-collapse collapse" role="tabpanel"
           aria-labelledby="#accordion_{{ category.id }}">
        <div class="panel panel-default subpanel ">
          <div class="row">
            {% for element in research_publications|dictsort:'pub_id' %}
              {% if element.category|stringformat:"s"  == category|stringformat:"s" %}
                <div class="col-md-4">
                  <div class="card" style="width:350px">
                    <img class="card-img-top" style="width: 350px; height: 350px" src="{{ element.cover.url }}" alt="Card image">
                    <div class="card-body">
                      <h4 class="card-title">{{ element }} - {{ element.pub_id }}
                        {% if element.new_publication == True %}
                          <span class="glyphicon glyphicon-flag"></span>
                        {% endif %}
                      </h4>

                      <button class="btn btn-default display-document" type="button" data-toggle="collapse"
                              data-target="#dropdown_{{ element.id }}"
                              aria-expanded="false"><span
                        class="glyphicon glyphicon-chevron-down"></span></button>
                      <div id="dropdown_{{ element.id }}" class="collapse">
                        <div class="publication-title">
                          <table class="table table-condensed">
                            <tbody>

                            {% for item in test_research %}
                              {% if item.publication|stringformat:"s"  == element|stringformat:"s" %}
                                <tr>
                                  <td class="col-md-1">
                                    <input type="checkbox" class="fakeRadio" name="DocumentChoice"
                                           value="{{ item.code }}">
                                  </td>
                                  <td class="col-md-5 document-title">{{ item.title }}</td>
                                  <td class="col-md-1 document-language"> {{ item.language }}</td>
                                  <td class="col-md-1">
                                    {% if item.format == 'pdf' %}
                                      <img src="{% static 'app/img/pdf-icon.png' %}"
                                           style="width:20px; height:20px;"/>
                                    {% endif %}
                                    {% if item.format == 'epub' %}
                                      <img src="{% static 'app/img/epub-icon.png' %}"
                                           style="width:20px; height:20px;"/>
                                    {% endif %}
                                  </td>
                                  <td class="col-md-1 document-flag">
                                    {% if item.publication.new_publication == True %}
                                      <span class="glyphicon glyphicon-flag"></span>
                                    {% else %}
                                      <span></span>
                                    {% endif %}
                                  </td>
                                  <td class="col-md-1 document-cover">
                                    {% if item.publication.cover %}
                                      <a href="{{ item.publication.cover.url }}">
                                        <img class="popup_image"
                                             style="width:20px; height:20px; border-radius:2px;"
                                             id="myImg_{{ item.id }}" src="{{ item.publication.cover.url }}">
                                      </a>
                                    {% endif %}
                                  </td>
                                </tr>
                              {% endif %}
                            {% endfor %}

                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
{% endfor %}

And this is a simplified version from my previous code in order to try some things :

{% for category in research_categories|dictsort:'name' %}
  <div class="panel-group accordion" id="accordion_{{ category.id }}" role="tablist"
       aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion_{{ category.id }}"
             href="#collapseOne_{{ category.id }}" aria-expanded="true" aria-controls="collapseOne">
            <i class="more-less glyphicon glyphicon-plus"></i>
            {{ category }}
          </a>
        </h4>
      </div>
      <div id="collapseOne_{{ category.id }}" class="panel-collapse collapse" role="tabpanel"
           aria-labelledby="#accordion_{{ category.id }}">
        <div class="panel panel-default subpanel ">
          <div class="row">
            {% for element in research_publications|dictsort:'pub_id' %}
              {% if element.category|stringformat:"s"  == category|stringformat:"s" %}
                <div class="col-md-4">
                  <div class="card" style="width:350px">
                    <img class="card-img-top" style="width: 350px; height: 350px" src="{{ element.cover.url }}" alt="Card image">
                    <div class="card-body">
                      <h4 class="card-title">{{ element }}</h4>
                      <button class="btn btn-default display-document" type="button" data-toggle="collapse"
                              data-target="#dropdown_{{ element.id }}"
                              aria-expanded="false"><span
                        class="glyphicon glyphicon-chevron-down"></span></button>
                      <div id="dropdown_{{ element.id }}" class="collapse">
                        <div class="publication-title">
                          <table class="table table-condensed">
                            <tbody>
                            {% for item in test_research %}
                              {% if item.publication|stringformat:"s"  == element|stringformat:"s" %}
                                <tr>
                                  <td class="col-md-5 document-title">{{ item.title }}</td>
                                </tr>
                              {% endif %}
                            {% endfor %}

                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
{% endfor %}

I don't know if you need my css part, but I think the issue is maybe due to my bootstrap grid ?

Thank you !

Answer 1

That looks like a clearfix issue. Can you try adding this to your css:

.panel.panel-default.subpanel > .row  > .col-md-4:nth-child(3n+1) {
  clear: both;
}

Depending on your other code it might need some more variations for different screen sizes.