form fields are stacked on top of each other instead of next to each other in twitter bootstrap

Question

I am using twitter bootstrap and trying to create one row in which two text boxes are next to each other. Here is my code:

<div class="container">
    <div class="span12"> 
        <div class="row">
            <label for="question_content">Content: </label>
            <textarea class="span3" id="question_content" name="question[content]" style="resize: none;">
            </textarea>

            <label for="question_conversation">Conversation: </label>
            <textarea class="span3" id="question_conversation" name="question[conversation]" style="resize: none;">
            </textarea>     
        </div>
    </div>
</div>

However, for some reason the form elements are stacked one on top of the other. How do I fix this?

Answer 1

On Bootstrap 2 (and judging by the code, that's what you're using) one quick fix could be to set display:inline on label in your custom CSS file like this:

label {
    display:inline
}

Here is a demo: http://www.bootply.com/132699

EDITED: The real Bootstrap-way however is to use .form-inline in your <form> element instead:

<form class="form-inline">
    <div class="container">
        <div class="span12"> 
            <div class="row">
                <label for="question_content">Content: </label>
                <textarea class="span3" id="question_content" name="question[content]" style="resize: none;">
                </textarea>

                <label for="question_conversation">Conversation: </label>
                <textarea class="span3" id="question_conversation" name="question[conversation]" style="resize: none;">
                </textarea>     
            </div>
        </div>
    </div>
</form>

See the documentation: http://getbootstrap.com/css/#forms-inline

And here is the updated demo: http://www.bootply.com/132701