Bootstrap button: left icon and centered text

Question

I need to generate a button (not a group of buttons) with the following structure:

left-side: [glyphicon] center: Text

example: https://www.dropbox.com/s/3idura8mxf4gekj/call_me.png

Here is what I did:

<div class="row btn-custom">
        <div class="btn-group btn-group-lg col-xs-12" >
          <button class="btn btn-success col-xs-1"><span class="glyphicon glyphicon-earphone"></span></button>
          <button class="btn btn-success col-xs-10">Call Us</button>
          <button class="btn btn-success col-xs-1"></button>
        </div>
      </div>

css:

.btn-custom {
    margin-bottom: 5px; 
}

.btn-custom button { 
    border-left:none; 
    height: 50px;
}

The problem that on a very small screen they start to stack up and don't look like one button. is there any better way to achieve this?

• this code is intended to be used only on a mobile site (m.* url) so please do not recommend me to do other stuff, i know what i am doing.

Thanks!!!

Answer 1

Use a simple button, with .pull-left on your glyphe :

<button class="btn btn-lg btn-success col-xs-12">
    <span class="glyphicon glyphicon-earphone pull-left"></span> Call Us
</button>

Bootply

Answer 2

Try

<button class="btn btn-success btn-large"><i class="glyphicon glyphicon-earphone"></i> Call us</button>

On your approach there are three buttons thats why it is stacked on mobile