Text on Left, Icon on Right - Bootstrap

Issue

How do I position the icon to the far right and keep the text on the left with Bootstrap.

Here's my effort so far: https://www.bootply.com/5E2CGFEWdx

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12"> Call Us <span class="glyphicon glyphicon-earphone push-right"></span></button>
  </div>
</div>

Solution

You can use float: right to make your image stick to the right, and set the text-align: left so the text will start at the left end.

Example here

align-left {
  text-align: left;
}

.push-right {
  float: right;
}

<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12 align-left"> Call Us <span class="glyphicon glyphicon-earphone push-right"></span></button>
  </div>
</div>

Answered By - Itay Gal