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?
Thanks!!!
Add class . text-center to the parent div to align any item inside to the center.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With