Bootstrap form layout the 'correct' way?

Question

Heres my form:

<div class="row">

<form class="well form-inline span6 offset3">

    <select name="data[Number][country]" id="NumberCountry">
        <option>Choose a country code:</option>
        <option value="+44">+44</option>
        <option value="+81">+81</option>
        <option value="+1">+1</option>
        <option value="+70">+70</option>
    </select>   
    <input type="text" class="input-small span2" placeholder="eg. 7764">
    <input type="password" class="input-small span2" placeholder="eg. 123456">
    <button class="btn btn-large btn-primary">Activate Your SIM</button>

</form>


</div>

Heres a working example:

http://jsfiddle.net/pickledegg/aJfMx/6/

I've bodged it up using Bootstrap, but I'm trying to get a grasp on how the rows and spans should be used for 'fine tuning' the layout.

I want the button to be centralised and have some space above it. As you can see I've fudged some rows and span classes in there, but can someone show me the 'best practice' way of doing this? It will help me form a clearer picture of how to properly use this framework.

Answer 1

^{Just saw your reply, here is my take on your mockup.}

In order to properly layout your design, we first need to separate the sections into two rows, an input row and a row for your button, to do this we can rely on the .control-group class set by the bootstrap to contain each section. So with the .control-group class in place, your markup will look something like this:

<div class="container">

 <div class="row">
     <form class="well form-inline span8 offset2 custom-form">    
        <div class="control-group">
            <div class="controls">
                <select class="span4" name="data[Number][country]" id="NumberCountry">
                    <option>Choose a country code:</option>
                    <option value="+44">+44</option>
                    <option value="+81">+81</option>
                    <option value="+1">+1</option>
                    <option value="+70">+70</option>
               </select>
               <input type="text" class="input-small span2" placeholder="eg. 7764">
               <input type="password" class="input-small span2" placeholder="eg. 123456">
            </div>
        </div>
        <div class="control-group">
            <div class="controls center">
                <button class="btn btn-large btn-primary">Activate Your SIM</button>
            </div>
        </div>
    </form>
</div>

</div> <!-- /container -->

This way you will have some margin set by the bootstrap on the input and button row and they will not stick together. I noticed that you are also including the responsive stylesheet in your design and that your setup sort of breaks upon window resize, also noticed the same on the bootstrap demo in the documentation so we have to work around that. For that goal, i created my own .custom-form class to properly space the input and button rows upon screen resize, this way your changes won't affect other bootstrap elements you may have on your site. Created another class called .center to center your button on the form.

.custom-form input[class*="span"] {
    width: 146px;
}

.center {
    text-align:center;
}

@media (max-width: 767px) {
    .custom-form input[class*="span"], select[class*="span"] {
        margin-bottom:10px;
        width:100%;       
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .custom-form.span8 {
        width:548px;
    }
} 

Demo: http://jsfiddle.net/aJfMx/8/

Answer 2

I'm going to put a slightly different take on this based on the newer version of bootstrap and the use of modal's but it holds true for using other containers rather than modals. I'm not taking anything away from the aforementioned solution because it is pretty solid; however, the reason I'm posting this is because the newer version will ensure cross-browser support and window resizing.

The first thing you will need to do is call on the form-horizontal class then create form-group(s) for each form element. Sounds more complicated than it is:

<form class="form-horizontal" name="formName" action="" method="POST">

AND

<!-- Name input-->
<div class="form-group">
    <label class="col-md-4 control-label" for="tokenName">Name</label>
        <div class="col-md-6">
            <input id="name" name="name" type="text" placeholder="Name" class="form-control">
        </div>
</div>

See... Not that bad at all.

Once you have that, set up your col lengths for the form-groups and you should be in pretty good shape. This will enforce proper sizing when you resize your window. The best part is that unless you want to get into your own customization of the form appearance, there is no css modifications needed. Bootstrap handles it for you. Here is a pretty good tutorial (http://tutsme-webdesign.info/bootstrap-3-contact-modal/) on it if you want to read further but for the purposes of this post; here is what I threw together real quick based on the tutorial.

<a href="#" data-toggle="modal" data-target="#modalName">Some Link Here</a>
<div class="modal fade" id="modalName" tabindex="-1" role="dialog" aria-labelledby="modalName" aria-hidden="true">
    <div class="modal-dialog>
        <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Some Header Here</h4>
    </div>
    <div class="modal-body">
        <div class="container center-block">
            <form class="form-horizontal" name="formName" action="" method="POST">
                <fieldset>

                    <!-- Name input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="tokenName">Name</label>
                        <div class="col-md-6">
                            <input id="name" name="name" type="text" placeholder="Name" class="form-control">
                        </div>
                    </div>

                    <!-- URL input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="url">URL</label>
                        <div class="col-md-6">
                            <input id="url" name="url" type="text" placeholder="http://somedomain.com" class="form-control">
                        </div>
                    </div>

                    <!-- Entity Association -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="associationId">Association</label>
                        <div class="col-md-6">
                            <select class="form-control" id="associationId" name="associationId">
                                <option>Choose an Association</option>
                                <option value="1">Programming</option>
                            </select>
                        </div>
                    </div>

                    <!-- Message body -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="description">Description</label>
                        <div class="col-md-6">
                            <textarea class="form-control" id="description" name="description" placeholder="Please enter your description here..." rows="5"></textarea>
                        </div>
                    </div>

                    <!-- Form actions -->
                    <div class="form-group">
                        <div class="col-md-10 text-right">
                            <button type="submit" value="Submit" class="btn btn-primary btn-lg">Save</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>
</div>
</div>