Felix Felix -5 years ago 304
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?

Answer Source

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>


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download