title: How to align text through text-* classes on Twitter Bootstrap Button Group?
body: <p>I would like to align left the text of the <code>button</code>s on a Twitter Bootstrap Button Group using class <code>text-left</code>.</p>
  
  <p>But, when I put the class in <code>a</code> or <code>div</code> tags (as the first class or the last class) the alignment doesn't change and is always center.</p>
  
  <p>The left align works only if I put a <code>style="text-align: left;</code> on the <code>a</code> tag.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="btn-group-vertical btn-group-lg" role="group"&gt;
    &lt;a class="btn btn-default btn-lg" role="button" href="page1.html"&gt;Short Text&lt;/a&gt;
    &lt;a class="btn btn-default btn-lg" role="button" href="page2.html"&gt;Long link text&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>