I'm utilizing the grid system to display 7 small images with a number next to each one, just like in this example. In my initial attempt, I didn't use the grid system, which made the process quite complex and time-consuming, taking me around 60 to 120 minutes. However, with the grid system, I was able to accomplish the same task in less than 10 minutes, although I encountered difficulties in resizing the font. Take a look at my attempt here
I experimented with overriding any potential font-size attributes and also attempted to assign additional classes to the divs and adjust the font size.
NOTE: Changing the font-family, on the other hand, was a simple task.
<div class="container" style="float: left; font-family: 'Germania One', cursive;">
<div class="row">
<div class="col">
<img src="forca.png" alt=""> 2
</div>
<div class="col">
<img src="destreza.png" alt=""> 3
</div>
<div class="col">
<img src="agilidade.png" alt=""> 2
</div>
<div class="col">
<img src="inteligencia.png" alt=""> 8
</div>
<div class="col">
<img src="resistencia.png" alt=""> 4
</div>
<div class="col">
<img src="fe.png" alt=""> 2
</div>
<div class="col">
<img src="carisma.png" alt=""> 4
</div>
</div>
</div>