Search code examples
cssbuttontwitter-bootstrap-3glyphicons

Bootstrap 3 align button text underneath GlyphIcon

I have this code that creates some Bootstrap 3 buttons with a GlyphIcon and some text but the problem is the text is aligned right of the icon. How can i align the text underneath the icon?

<div class="btn-group">
    <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-file"></span>Archive</button>
    <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-trash"></span>Delete</button>
</div>
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-share"></span>Resend</button>
Solution

  • Add the text-center helper class to the .btn, and add a <br> after the icon, before the text.

    <button type="button" class="btn btn-default btn-lg text-center"><span class="glyphicon glyphicon-share"></span><br>Resend</button>

    Demo: http://www.bootply.com/SWzsbPwPWC