bootstrap: Small text right next to thumbnail

Question

I am trying to build a simple leader board for a site. Site is jsp based and at the moment I have following structure:

    <div class="panel panel-primary">
        <div class="panel-heading"><h3 class="panel-title">Global Leader Board</h3>
        </div>
        <div class="panel-body">
            <!-- <c:import url="/jsp/components/recommendations.jspf"/> -->
            <c:if test="${(not empty globalLeaderByCompletionRate) and (fn:length(globalLeaderByCompletionRate)>0)}">
                <c:forEach items="${globalLeaderByCompletionRate}" var="completedRec" varStatus="recLoop">
                    <div class="row">
                            <div class="thumbnails">
                                ${completedRec.representativename}
                                ${completedRec.completedPercent }
                                <c:if test="${completedRec.goldCompleted > 0}">
                                    <img src="<c:url value="/img/gold.png"/>"  width="25">
                                </c:if>
                                <c:if test="${completedRec.silverCompleted > 0}">
                                    <img src="<c:url value="/img/silver.png"/>" width="25">
                                    ${completedRec.silverCompleted}
                                </c:if>
                                <c:if test="${completedRec.bronzeCompleted > 0}">
                                    <img src="<c:url value="/img/bronze.png"/>" width="25">
                                    ${completedRec.bronzeCompleted}
                                </c:if>                             
                            </div>              
                    </div>
                </c:forEach>    
            </c:if>                                                         
        </div>              
    </div>

I have the following CSS to get the thumbnails inline

.thumbnails img {
    float: left;
    margin-right: 10px;
    display: block;
}

What I want is following structure

userName: 56% Completed thumbnailImage(2) thumbnailImage(1) thumbnailImage(5) 

Each thumbnail represent a badge and number in the brackets indicate how many of that kind that user have won. Similar structure to what stackoverflow has. How can I improve my existing code to do that.

Answer 1

Have you tried usig the Bootstrap Badge components : http://getbootstrap.com/components/#badges

This will give you the numbers next to the gold/silver/bronze awards.

I'd then simply use the bootstrap grid to display.

Example below is using 10 of the 12 grid, but obviously adjust to your surrounding div's and layout:

<div class="row">
    <div class="col-md-2">${completedRec.representativename}</div>
    <div class="col-md-2">${completedRec.completedPercent }</div>
    <c:if test="${completedRec.goldCompleted > 0}">
    <div class="col-md-2"><img src="<c:url value="/img/gold.png"/>"<span class="badge">your value</span></div>
    </c:if>
    <c:if test="${completedRec.silverCompleted > 0}">
    <div class="col-md-2"><img src="<c:url value="/img/silver.png"/>"<span class="badge">your value</span></div>
    </c:if>
    <c:if test="${completedRec.bronzeCompleted > 0}">
    <div class="col-md-2"><img src="<c:url value="/img/bronze.png"/>"<span class="badge">your value</span></div>
    </c:if>
</div>