Bootstarp Unread message bell

The Thymeleaf version:

   <li>
       <a title="News" class="fa fa-bell">
       <th:block th:if="${msgNumber >0}">
       <label class="label label-danger" style="right:0px">[[${msgNumber}]]</label>
       </th:block>
       </a>
   </li>
Copy the code

Pure HTML version:

 <li>
     <a title="News" class="fa fa-bell">
          <label class="label label-danger" style="right:0px">12</label>
     </a>
 </li>
Copy the code

The effect

style=”right:0px”

Do not remove it or the message quantity style will be centered