Responsive Result Summary using Bootstrap

Your question shows you are on the right track. Best practice is to keep the styles DRY (don't repeat yourself.) You can give a group of elements a general class and then add a second utility class to differentiate them. You do this by declaring 'general' (space) 'utility' in the class attribute.

              <div class="item">
                <p class="stat reaction"><img src="images/icon-reaction.svg" alt="reaction">Reaction<span>80/100</span></p>
                <p class="stat memory"><img src="images/icon-memory.svg" alt="memory">Memory<span>92/100</span></p>
                <p class="stat verbal"><img src="images/icon-verbal.svg" alt="reaction">Verbal<span class="more">61/100</span></p>
                <p class="stat visual"><img src="images/icon-visual.svg" alt="visual">Visual<span class="more">72/100</span></p>
              </div>

Then in the css

.item p {
    font-size: 1.25rem;
}

.stat {
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
}
.reaction {
    background-color: hsl(0, 46%, 95%);
    color: hsl(0, 100%, 67%);
}

.memory {
    background-color: hsl(34, 64%, 94%);
    color: hsl(39, 100%, 56%);
}

.verbal {
    background-color: hsl(168, 71%, 93%);
    color: hsl(166, 100%, 37%);
}

.visual {
    background-color: rgb(243, 238, 255);
    color: hsla(256, 72%, 46%, 1);
}

This will save you some typing and keep your CSS clean and readable.

BTW, I noticed you use h5 for styling and not for structure. This is not a good practice. Use a <p> tag and make it the size you want. (see above)

Great job on the challenge and keep on coding!

Thanks for the help, i will try it out