Bootstrap: left align text in btn-block

3
votes

I'm using some column-width Bootstrap buttons defined using the btn-block class. However, the text inside them is centered by default, and I'd like to left-justify it so it looks more natural in my form. Is there a good Bootstrap solution to this, or do I have to use CSS?

What I've got:

<a href="url" class="btn btn-default btn-block" role="button">Push Meh</a>
5
htmlcsstwitter-bootstrap
Similar discussion: stackoverflow.com/questions/26675063/… - JGV
Oh, weird. I wonder why that didn't come up when I searched for it. - Luciasar
Also, the bootstrap solution there doesn't seem to work (at least in bootstrap 3.3.5) and the other one messes with the CSS which I'd like to avoid in this case. - Luciasar

5 Answers

8
votes

This is perhaps a bit of a hacky way to do it, but achieves your desired effect:

<a href="#" class="btn btn-default btn-block" role="button"><span class="pull-left">Push Meh</span>&nbsp;</a>

And a Bootply Demo

7
votes

For anyone using Bootstrap 4.1, there is a text-left class that can be used with btn-block:

<a href="#" class="btn btn-primary btn-block text-left">Push Meh</a>
0
votes

Another way is through flexbox. You may use the justify-content property and don't forget the display:flex as well. Otherwise, it will not work. (see code below)

a.btn {
   display: flex;
   justify-content: flex-start; }

You can learn more about it here: https://css-tricks.com/almanac/properties/f/flex-direction/

Cheers!

0
votes

You can more easily use text-left first before your btn like this:

<a href="url" class="text-left btn btn-default btn-block" role="button">Push Meh</a>
0
votes

Another simple way to do it is by text-left class for Bootstrap 4

 <a href="button" class="btn btn-outline-success btn-block text-left">
      <span class="iconify" data-icon="bx:bx-edit-alt" data-inline="true"></span> Start a discussion  
    </a>