How to make boxes fields the same size

Question

I'm using HTML and TWIG.
I have different boxes with different fields filled with data retrieved from a php call. The problem is I don't know how to make those fields (and consequently boxes) the same size.
The size of each field should be the tallest one of the group. So far I got this

As you can see, Contratto, JSer and Azienda are fine (usually always on a single line, so it shouldn't be a problem).
The problem is Note: as you can see, it goes well for single box, but having more ones just break the visualization. I'd like all fields to be the same size in their own group:

every Contratto the size of the biggest one;
every JSer the size of the biggest one;
every Azienda the size of the biggest one
and of course, the important one, every Note the size of the biggest one

Here's the code I'm using, with Bootstrap 3.3.7

{% if alerts|length > 0 %}
    <div class="box box-danger">
        <div class="box-header  with-border">
            <h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp; I TUOI AVVISI ({{ alerts|length }})</h3>
        </div>
        <div class="box-body">
            {% for alert in alerts %}
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="shadow-box">
                        <div class="box-header  with-border">
                            <h3 class="box-title" style="color: #ff000f">Avviso</h3>
                        </div>
                        <div class="box-body">
                            <p><b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}</p>
                            <p><b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}</p>
                            <p><b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}</p>
                            <p><b>Note</b>: {{ alert.getJob().getNote() }}</p>
                        </div>

                        {% if alert.getUtente() is not null %}
                            <div class="box-footer" style="text-align: left">
                                <p><b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}</p>
                            </div>
                        {% endif %}

                        <div class="box-footer">
                            <a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}"class="link-avviso">
                                Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}

EDIT: this is the code version with columns and rows

{% if alerts|length > 0 %}
    <div class="box box-danger">
        <div class="box-header  with-border">
            <h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp; I TUOI AVVISI ({{ alerts|length }})</h3>
        </div>
        <div class="box-body">
            {% for alert in alerts %}
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="shadow-box">
                        <div class="box-header  with-border">
                            <h3 class="box-title" style="color: #ff000f">Avviso</h3>
                        </div>
                        <div class="box-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <b>Note</b>: {{ alert.getJob().getNote() }}</p>
                                </div>
                            </div>
                        </div>

                        {% if alert.getUtente() is not null %}
                            <div class="box-footer" style="text-align: left">
                                <p><b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}</p>
                            </div>
                        {% endif %}

                        <div class="box-footer">
                            <a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}"class="link-avviso">
                                Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}

Any suggestion?

EDIT ANSWER: After few tries, I normalized the single row instead of single fields...single fields would not be the same height, but the row will, so this is actually fine for my final result. Here's the answer:

//CSS in head
.alertProperties {
   padding-left:0px !important;
}

//Code
{% if alerts|length > 0 %}
    <div class="box box-danger">
        <div class="box-header with-border">
            <h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp; I TUOI AVVISI ({{ alerts|length }})</h3>
        </div>
        <div class="box-body">
            {% for alert in alerts %}
                {% if loop.index % 5 == 0 or loop.first %}                                   
                    <div class="row">
                {% endif %}
                        <div class="col-lg-3 col-md-3 col-sm-3">
                            <div class="box-header with-border"><h3 class="box-title" style="color: #ff000f">Avviso</h3></div>
                            <div class="box-body" style="border-left: 1px solid #00ACDF !important">
                                <div class="col-sm-12 alertProperties">
                                    <b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}
                                </div>
                                <div class="col-sm-12 alertProperties">
                                    <b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}
                                </div>
                                <div class="col-sm-12 alertProperties">
                                    <b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}
                                </div>
                                <div class="col-sm-12 alertProperties">
                                    <b>Note</b>: {{ alert.getJob().getNote() }}</p>
                                </div>

                                {% if alert.getUtente() is not null %}
                                    <div class="box-footer" style="text-align:left;">
                                        <div class="col-sm-12 alertProperties">
                                            <b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}
                                        </div>
                                    </div>
                                {% endif %}

                                <div class="box-footer">
                                    <div class="col-sm-12">
                                        <a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}" class="link-avviso">
                                            Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                {% if (loop.index % 4 == 0 or loop.last) %}
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    {# </div> #}
    </div>
{% endif %}

Does this answer your question? [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — DarkBee, Jul 29 '21 at 10:11
@DarkBee not really, because those answers start from the assumption that we have different column inside a row. But I have different boxes and different rows, one for each field...it's the same argument, but different question — alesssz, Jul 29 '21 at 10:27
Read into the [flexbox](https://stackoverflow.com/a/22892773/446594) solution they provide. That should do the trick — DarkBee, Jul 29 '21 at 10:35

score -1 · Answer 1 · answered Jul 29 '21 at 10:09

You can truncate text of the note section by forcing text on the same line with the white-space:none

p{ 
  
  width:400px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

However if you wanna truncate it to more than one line you can read it more on chris coyier's article here

How to make boxes fields the same size

1 Answers1