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>