Question

For some reason, I tried making a simple HTML using Twitter’s Bootstrap but something is broken on my side and I am unable to figure out what is wrong. I put up a jsFiddle page is here and have attached a screenshot as well. The problems are:

• Text box styles are not as shown on the Bootstrap page
• Labels and Textboxes are not getting aligned (labels on left, textbox on right)
• There is no spacing between fields
• The drop down box does not work.
• The search box is messed up

I don’t seem top understand what step I am missing. It is pretty late in here and I might use another set of eyes. Can someone please tell me if I am missing something obvious? The buttons get style so I am not really sure what is happening.

Answer 1

You can achieve this with a little bit of CSS.

Floating the input and the label to the left and then adding a bit of margin.

label,input
{
    float:left;
    margin-bottom:5px;
}
label{
    clear:left;
    width:50px;
}

Demo: http://jsfiddle.net/Lrczj/1/

Also note that this portion is invalid HTML:

<input id="enableTooltip" type="checkbox">Enable tooltip </input>

You just need to make the text into a label like you have with the other text fields. The input has no closing tag in HTML.

UPDATE

After a closer look at your HTML it looks like you forgot to put your form fields in a form.

Inputs always need to go inside a <form>[...]</form>.

Here’s your code again with the form tags included: http://jsfiddle.net/Lrczj/2/