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/