What's on hand:
I have implemented Django to populate the Makes in a view.
Check out my template below:
<div class="container">
<div class="row">
<div class="btn-group" id="makesTable">
{% if makes %}
{% for make in makes %}
<button type="button" name="button" class="btn btn-default" id="{{ make.id }}">
<br />
<img class="center-block" src="[REDACTED]" />
<br />
<p>{{ make.name }}</p>
</button>
{% endfor %}
{% endif %}
</div>
</div>
</div>
Here is the resultant HTML5 output:
<div class="container">
<div class="row">
<div class="btn-group" id="makesTable">
<button type="button" name="button" class="btn btn-default" id="1">
<br />
<img class="center-block" src="/static/IQC/assets/img/gallery/brands/128/Acura.png" />
<br />
<p>Acura</p>
</button>
<button type="button" name="button" class="btn btn-default" id="2">
<br />
<img class="center-block" src="/static/IQC/assets/img/gallery/brands/128/Alfa%20Romero.png" />
<br />
<p>Alfa Romeo</p>
</button>
<button type="button" name="button" class="btn btn-default" id="3">
<br />
<img class="center-block" src="/static/IQC/assets/img/gallery/brands/128/Audi.png" />
<br />
<p>Audi</p>
</button>
</div>
</div>
</div>
Presently, I am facing an obstacle with responsive design. My goal is to arrange the buttons in a 5x7 grid, however, at times, I encounter the following issue: