Felix Felix - 4 months ago 30x
HTML Question

Align bootstrap glyphicons vertically with text on both sides?

<div style="display:inline-block">
usernad <span class="glyphicon glyphicon-user"></span> ape<br>
dads <span class="glyphicon glyphicon-user"></span> stack<br>
defdood <span class="glyphicon glyphicon-user"></span> rocks<br>
eleminem <span class="glyphicon glyphicon-user"></span> boom<br>
<div style="display:inline-block">
te43st@gmail.com <span class="glyphicon glyphicon-envelope"></span> tester32<br>
te44st@gmail.com <span class="glyphicon glyphicon-envelope"></span> fourteenppl<br>
test32@gmail.com <span class="glyphicon glyphicon-envelope"></span> eleven<br>
test@gmail.com <span class="glyphicon glyphicon-envelope"></span> goo<br>

I'm trying to create two columns, each with rows in this format:
text glyphicon text
, but I want to align the glyphicons vertically in the straight line for readability. Is there any way to do this with bootstrap?


you have to wrap the text with span then float it, and clear it at each 4 item. And you need to use min-width

Right align text before the glyphicon is what I meant to say.

Then use text-align:right

div {
  display: inline-block;
  border: dotted 1px red;
  vertical-align: middle;
div span {
  float: left
div span:nth-of-type(3n+1) {
  clear: left;
div:first-of-type span:nth-of-type(3n+1) {
  min-width: 70px;
div:nth-of-type(2) span:nth-of-type(3n+1) {
  min-width: 120px
.glyphicon {
  vertical-align: bottom;
  margin:2px 5px
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <span> usernad</span>  <span class="glyphicon glyphicon-user"></span><span> ape </span>
  <span>dads</span>  <span class="glyphicon glyphicon-user"></span>  <span>stack</span>
  <span>defdood</span>  <span class="glyphicon glyphicon-user"></span>  <span>rocks</span>
  <span>eleminem </span><span class="glyphicon glyphicon-user"></span><span> boom</span>
  <span> te43st@gmail.com</span>  <span class="glyphicon glyphicon-envelope"></span>  <span>tester32</span>
  <span>te44st@gmail.com</span>  <span class="glyphicon glyphicon-envelope"></span><span>fourteenppl</span>
  <span>test32@gmail.com</span>  <span class="glyphicon glyphicon-envelope"></span>  <span>eleven</span>
  <span>test@gmail.com</span>  <span class="glyphicon glyphicon-envelope"></span>  <span>goo</span>