Bootstrap : align button text left

Question

How can I align text to the left within a bootstrap button? I have multiple buttons with text of varying length, and all the button need to have same width. I have achieved this using the class col-xs-11.

Sample button code below:

<input type="button" value="Applicant/Subsidiary" id="mybutton" name="test" class="primary-btn col-xs-11">

Is it possible to achieve this without creating a custom style, other than what is provided by bootstrap? I'm using Bootstrap v3.0.1

Answer 1

just add text-left class

<input type="button" value="Applicant/Subsidiary" id="mybutton" name="test" class="primary-btn col-xs-11 text-left">

Answer 2

The issue is not how to css text-align to the left, the original post was asking if there is a bootstrap class name(s) works for it.

The .text-left works, but the trouble is there is a .btn that is stronger than text-left, I think this is something bootstrap need to think about.

Checkout this screenshot that I did a test with Chrome inspect on Bootstrap's site.

In my Chrome, I add "text-left" on the demo button, and this is the result. Therefore, have !important on it!

.text-left {
  text-align: left !important;
}

Answer 3

Or use inline styling for if its just one single button

style="text-align:left; padding-left:6px"

Answer 4

You can just apply css the normal way instead of using additional classes.

/*specific button*/    
#mybutton {
   text-align: left;
}

/*all input that have type button*/
input[type='button'] {
   text-align: left;
}

Answer 5

Just add !important to your button definition and it will force utilization.