JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<ul class="buttons">
  <li><span class="glyphicon glyphicon-edit"></span></li>
  <li><span class="glyphicon glyphicon-pencil"></span></li>
  <li><span class="glyphicon glyphicon-list"></span><span class="badge count">3</span></li>
  <li><span class="glyphicon glyphicon-user"></span></li>
</ul>

CSS

.buttons {
     -webkit-transform: translate(50%, -50%); 
    position: absolute;
    top: 148px;
    text-align: center;
    right: 50%;
    list-style: none;
    margin: auto;
    padding: 0;
}
.buttons li {
   display:inline;
   font-size:48px;
   margin:5px;
}
.count {
   z-index:1;
   position:absolute;
   top:2px;
   right:18px;
   background-color:#d9534f;
  }
}