Getting rows of equal height in nested columns HTML Bootstrap

Question

I am building a Flask app and I am having some troubles with one of the HTML-templates. What I want to do is a sort of 3x3 tile layout for news stories, all tiles of equal height and width. This is my html code:

{% extends "base.html" %}

{% block app_content %}

<div class = "col-lg-12 row.row-eq-height text-left">
    <div class = "col-lg-4">
      {% for result in results[:3] %}
        {% include '_result.html' %}
      {%endfor %}
      </div>
    <div class = "col-lg-4">
      {% for result in results[3:6] %}
        {% include '_result.html' %}
      {%endfor %}
    </div>
    <div class = "col-lg-4">
      {% for result in results[6:9] %}
        {% include '_result.html' %}
      {%endfor %}
    </div>
    </div>
  </div>
</div>
{% endblock %}

The problem is that I am getting three nice and evenly sized columns, but the rows are not of equal height. My guess is that it has to do with the nested columns (having col-lg-12 and then col-lg-4). Is there any way to get all the rows the same height?

score 0 · Answer 1 · answered Mar 19 '18 at 18:35

0

Looks like you might have a few bugs in your markup:

row.row-eq-height should be row row-eq-height (no period (.) and a space between the classnames.
Bootstrap doesn't allow a col and row to be in the same <div>. You should be able to remove the col-lg-12 from your first <div>.
It looks like you have too many closing divs </div>.

Final code would be:

<div class="row row-eq-height text-left">
  <div class="col-lg-4">
    {% for result in results[:3] %}
      {% include '_result.html' %}
    {%endfor %}
  </div>
  <div class="col-lg-4">
    {% for result in results[3:6] %}
      {% include '_result.html' %}
    {%endfor %}
  </div>
  <div class="col-lg-4">
    {% for result in results[6:9] %}
      {% include '_result.html' %}
    {%endfor %}
  </div>
</div>

More info: Be sure to checkout Bootstrap's grid documentation for more info on how to structure your markup, but generally it would be container > row > col.

Keep in mind: row-eq-height is taking advantage of flexbox which does not work in IE9 and below.

answered Mar 19 '18 at 18:35

sallf

2,583
3
19
24

Thank you for your suggestions! I am new to html/bootstrap, hence the bugs in the markup. However, even after following your suggestions I still get the same picture: Equal columns, but no equal height rows...I really don't know why it is not working... – user5791200 Mar 19 '18 at 18:59
@user5791200 can you post a link? Also do you know what version of Bootstrap you are using? – sallf Mar 20 '18 at 15:41
I am using Bootstrap 3. I now found a solution working for me by not using bootstrap but I found another solution by following the steps outlined in the answer here: https://stackoverflow.com/questions/20456694/grid-of-responsive-squares . I just could not get it to work with bootstrap... And I do not have a link yet as the app is not online yet, still in debugging... – user5791200 Mar 20 '18 at 20:57
It's possible that you don't have the `.row-eq-height` class in your styles. You can try and add the class `.row-eq-height { display: flex }` to your css. – sallf Mar 20 '18 at 21:44

score 0 · Answer 2 · answered Mar 20 '18 at 21:01

As mentioned above, I found a solution not involving bootstrap here: stackoverflow.com/questions/20456694/grid-of-responsive-squares - but if anyone still has an all-bootstrap solution it would certainly be interesting! I still have no clue why it did not work..

Getting rows of equal height in nested columns HTML Bootstrap

2 Answers2