Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap button: left icon and centered text

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!!!

like image 989
Nizar Blond Avatar asked Dec 19 '13 13:12

Nizar Blond


People also ask

How do I keep my Bootstrap button centered?

Add class . text-center to the parent div to align any item inside to the center.

How do you center align an icon in Fa Fa?

The most preferred way to center Font Awesome Icons is to assign a center class to each <i> tag. Setting width to 100%, let's each icon cover 100% area horizontally. Also text-align then centers the icon accordingly to the width being used.


1 Answers

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

like image 200
zessx Avatar answered Oct 24 '22 22:10

zessx