arrange fields of the form using bootstrap 3?

Question

I am using Bootstrap3 in my project. I have enclosed my form in a jumbotron. Here is how my form looks (not good looking as of now):

I tried to make it better. but it is getting worse. I want all the fields to be in one-line and the submit button centered below them. I have no idea how to do it. I am very new using Bootstrap3.

Here is my html code:

<form  action="" id="id-exampleForm" class="form-inline" method="post" >
    <input type='hidden' name='csrfmiddlewaretoken' value='1bfhNFINdeJVpSNBBQd0X7zLWLVwm1bB' />
    <div id="div_id_price_order" class="form-group">
        <label for="id_price_order_0" class="control-label col-lg-2 requiredField">
            price order
            <span class="asteriskField">*</span>
        </label>
        <div class="controls col-lg-12">
            <label class="radio">
                <input type="radio" checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >lowest</label>
            <label class="radio">
                <input type="radio" name="price_order" id="id_price_order_2" value="highest_price" >highest</label>
        </div>
    </div>
    <div class="form-group">
        <div id="div_id_newest_entry" class="checkbox">
            <div class="controls col-lg-offset-2 col-lg-12">
                <label for="id_newest_entry" class=" requiredField">
                    <input class="checkboxinput checkbox" id="id_newest_entry" name="newest_entry" type="checkbox" />
                    latest date
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div id="div_id_latest_year" class="checkbox">
            <div class="controls col-lg-offset-2 col-lg-12">
                <label for="id_latest_year" class=" requiredField">
                    <input class="checkboxinput checkbox" id="id_latest_year" name="latest_year" type="checkbox" />
                    latest year
                </label>
            </div>
        </div>
    </div>
    <input type="submit" name="submit" value="Submit" class="btn btn-primary button white" id="submit-id-submit" />
</form>

EDIT:

I want something like this: I have edited this on powerpoint. so it does not look very good.

Answer 1

EDIT AFTER COMMENT

Please see the fiddle for an inline form in a Jumbotron with the button in-line (not below centered), and fieldset.

Note : that I changed the vertical alignment of the checkbox and radio + add some right margin, and an extra small button. The form will go as block if the screen is extra-small as a bootstrap behavior.

JsFiddle

<div class="jumbotron">
<form class="form-inline">
    <fieldset class="radiogroup"> 
        <legend>Sorting Criteria</legend> 
        <label for="id_price_order_0">
            price order
            <span class="asteriskField">*</span>
        </label>
        <label class="radio" for="id_price_order_1">
            lowest
            <input type="radio" checked="checked" id="id_price_order_1" />
        </label>
        <label class="radio" for="id_price_order_2">
            highest
            <input type="radio" id="id_price_order_2" />
        </label>
        <label for="id_newest_entry" class="requiredField checkbox">
            latest date
            <input id="id_newest_entry"  type="checkbox" />
        </label>
        <label for="id_latest_year" class="requiredField checkbox">
            latest year
            <input  id="id_latest_year"  type="checkbox" />
        </label>
        <input type="submit" name="submit" value="Submit" class="btn btn-primary btn-xs"  />
    </fieldset>
</form>    

Answer 2

Add the class form-control to ALL of your input elements for a start:

<input type="radio" class='form-control' checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >

Also, what I do to make my life easier is to pre-wrap the elements in the correct sized divs instead of doing it in the labels and inputs like so:

<div class='row'>
    <form ... >
        <div class='col-lg-2>
            <label ... ></label>
            <input ... >
        </div>
        <div class='col-lg-2'>
            ...
        </div>
        ...
    </form>
</div>

Its a tiny bit slower to load but it makes the code so much more readable I think it is worth it. Also I feel that there is a lot of extra in your code that shouldn't be there and is confusing check out the code here: http://getbootstrap.com/css/#forms. They show you exactly how to format an in-line form.

Could being inside a .jumbotron be causing the issues? Why don't you try a panel or a well This should work for you:

<div class='panel panel-default'>
<div class="panel-heading">In-line Form</div>
<div class="panel-body">
    <form action='anotherScript.php' method='post' class='form-inline'>
    <div class='row'>
        <div class='col-md-4'>
            <strong>Price:</strong>
            <div class="radio-inline">
                <label>
                    <input type="radio" name="rad1" value="low" checked>
                    Lowest
                </label>
            </div>
            <div class="radio-inline">
                <label>
                    <input type="radio" name="rad1" value="high">
                        Highest
                    </label>
            </div>
        </div>
        <div class='col-md-4'>
            <div class="checkbox-inline">
                <label>
                    <input type="checkbox" name='date' value='date'>
                    Latest Date
                </label>
            </div>
        </div>
        <div class='col-md-4'>
            <div class="checkbox-inline">
                <label>
                    <input type="checkbox" name='year' value='year'> 
                    Latest Year
                </label>
            </div>
        </div>
    </div>
    <div class='row'>
        <div class='col-md-12'>
            <center><button type='submit' class='btn btn-primary'>Submit</button></center></form>
        </div>
    </div>
</div>

Fiddle: http://jsfiddle.net/52VtD/5046/

Make sure you stretch the results panel to full width to see the form in-line.