Bootstrap

Use Masonry with Bootstrap

Example

base.html

<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

Templates: Add to a row

data-masonry='{"percentPosition": true }'

---

Better snippets

COLLAPSE

<a data-bs-toggle="collapse" href="#collapse_UPDATE_" role="button" aria-expanded="false" aria-controls="collapse_UPDATE_" style="text-decoration: none;"> ▼</a>
<div class="collapse" id="collapse_UPDATE_">
    <div class="card card-body p-0 border-0">
    ...
    </div>
</div>

---

MODAL

<a type="button" data-bs-toggle="modal" data-bs-target="#_UPDATE_MODAL_Modal">_UPDATE_</a>
  
<div class="modal fade" id="_UPDATE_MODAL_Modal" tabindex="-1" aria-labelledby="_UPDATE_MODAL_ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title fs-5" id="_UPDATE_MODAL_ModalLabel">_UPDATE_TITLE_</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
        ...
        </div>
    </div>
    </div>
</div>

---

TABLE

<table class="table table-hover table-sm" style="font-size: small;">
    <thead>
        <tr>
        <th scope="col">Event</th>
        <th scope="col">Date</th>
        <th scope="col">Fossils</th>
        </tr>
    </thead>
    <tbody>
        {% for event in events %}
        <tr>
        <td><a href="#" style="text-decoration: none;">{{ event.event_name }}</a></td>
        <td>{{ event.event_date|date:'Y.m.d' }}</td>
        <td>{{ event.fossils.all.count }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>