Bootstrap: left align text in btn block
I am using some Bootstrap buttons of column widths defined with btn-block class. However, the text inside them is centered by default, and I would like to leave it as an excuse to make it look more natural in my form. Is there a good Bootstrap solution for this, or do I need to use CSS?
What I have:
<a href="url" class="btn btn-default btn-block" role="button">Push Meh</a>
+3
source to share
2 answers
This is perhaps a slightly hackish way of doing it, but achieves the desired effect:
<a href="#" class="btn btn-default btn-block" role="button"><span class="pull-left">Push Meh</span> </a>
And Demo Bootply
+6
source to share
Another way is through flexbox. You can use the justify-content property and don't forget about display: flex. Otherwise it won't work. (see code below)
a.btn {
display: flex;
justify-content: flex-start; }
You can read more about this here: https://css-tricks.com/almanac/properties/f/flex-direction/
Hooray!
0
source to share