How do I left align these Bootstrap form items

Question

I m using Bootstrap for the first time  and am having a lot of trouble aligning this form-horizontal to the left   The list items are horizontal  as they should be  but I want the control-labels  the Bootstrap class for form labels  to all be at the same position floated left   The form is contained in a div with a span of 7  as my site is two columns -- 7 and 4 columns   Below is my HTML  If you look under  Horizontal Forms  on this page http   accounts tao tw shuttle com examples bootstrap basecss forms  you ll see that the labels are left aligned  but not absolutely left-aligned so that the beginning of the labels are at the same position vertically     lt form class  form-horizontal  gt       lt div class  control-group  gt           lt label class  control-label  for  inputSaving  gt What are you saving for  lt  label gt           lt div class  controls  gt               lt input class  span4  type  text  id  inputSaving  placeholder  e g  Swimming Lessons  Birthday Party  College Fund  etc   gt           lt  div gt       lt  div gt       lt div class  control-group  gt           lt label class  control-label  for  description  gt Add a short description lt  label gt           lt div class  controls  gt               lt textarea class  span4  rows  4  placeholder  Describe in your own words the saving goal for this piggybank  gt  lt  textarea gt           lt  div gt       lt  div gt       lt div class  control-group  gt           lt label class  control-label  for  categoryselect  gt Choose a Category lt  label gt           lt div class  controls  gt               lt select class  span4  gt                   lt  -- Add some CSS and JS to make a placeholder value-- gt                   lt option value  Kittens  gt Kittens lt  option gt                   lt option value  Keyboard Cat  gt Keyboard Cat lt  option gt                   lt option value  Twitter Bird  gt Twitter Bird lt  option gt               lt  select gt           lt  div gt       lt  div gt       lt div class  control-group  gt           lt label class  control-label  for  goal  gt Your Saving Goal lt  label gt           lt div class  controls  gt               lt input type  text  class  span4  id  goal  gt           lt  div gt       lt  div gt       lt button class  btn btn-large btn-primary  type  button  gt Submit lt  button gt   lt  form gt

User · Answer

Instead of altering the original bootstrap css class create a new css file that will override the default style.

Make sure you include the new css file after including the bootstrap.css file.

In the new css file do

.form-horizontal .control-label{
   text-align:left !important; 
}

User · Answer

Just my two cents  If you are using Bootstrap 3 then I would just add an extra style into your own site s stylesheet which controls the text-left style of the control-label   If you were to add text-left to the label  by default there is another style which overrides this  form-horizontal  control-label  So if you add    form-horizontal  control-label text-left      text-align  left      Then the built in text-left style is applied to the label correctly

User · Answer

If you are saying that your problem is how to left align the form labels  see if this helps  http   jsfiddle net panchroma 8gYPQ   Try changing the text-align left   right in the CSS      form-horizontal  control-label         text-align right         text-align left      background-color  ffa      Good luck

User · Answer

pull-left  is what you need  it looks like you are using Bootstrap 2  I am not sure if that is available  consider bootstrap 3  unless ofcourse it is a huge rework      for Bootstrap 3 but you need to make sure you have 12 columns in each row as well  otherwise you will have issues

User · Answer

I was having the exact same problem   I found the issue within bootstrap min css   You need to change the label  label  display inline-block   to label  display block

User · Answer

Just add style  text-align  left  to your label

[html] How do I left align these Bootstrap form items?

Examples related to html

Examples related to css

Examples related to forms

Examples related to twitter-bootstrap