Bootstrap 3 pull-right not working

Question

I am creating a multi column form using Bootstrap 3.

Here is the first column.

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form class="form-inline" role="form">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                             <label for="RecordID" class="col-md-4 nopadding">Record ID</label><div class="col-md-8 nopadding pull-right"><input class="form-control" id="RecordID" type="text"></div>
                        </div>
                        <div class="form-group">
                             <label for="ID" class="col-md-5 nopadding">ID</label><div class="col-md-7 nopadding pull-right"><input class="form-control" id="ID" type="text"></div>
                        </div>
                        <div class="form-group nopadding">
                             <label for="FamilyName" class="col-md-5 nopadding">Family Name</label><div class="col-md-7 nopadding"><input class="form-control" id="FamilyName" type="text" maxlength="30"></div>
                        </div>
                        <div class="form-group">
                             <label for="GivenName" class="col-md-5 nopadding">Given Name</label><div class="col-md-7 nopadding"><input class="form-control" id="GivenName" type="text" maxlength="30"></div>
                        </div>
                        <div class="form-group">
                             <label for="MiddleName" class="col-md-5 nopadding">Middle Name</label><div class="col-md-7 nopadding"><input class="form-control" id="MiddleName" type="text" maxlength="30"></div>
                        </div>
                    </div>
                    //other column
                </div>
            </form>
        </div>
    </div>
</div>

However, I got the first column looks like this.

I wanted to align the text fields to the right so I added the "pull-right" class to the div that encapsulated the text field of ID. However, it doesn't work.

Here is the JSFiddle link, you will find the nopadding class in the link, it just remove the padding. The result box of JSFiddle is not large enough by default, you will need to pull the result box to get the result I got.: JSFiddle link

Answer 1

I would suggest something like that:

<div class="container nopadding">
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="recordId" class="col-sm-2 control-label">Record Id</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="recordId" placeholder="Record Id">
        </div>
    </div>
    <div class="form-group">
        <label for="id" class="col-sm-2 control-label">Id</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="id" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <label for="familyName" class="col-sm-2 control-label">Family Name</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
        </div>
    </div>
    <div class="form-group">
        <label for="givenName" class="col-sm-2 control-label">Given Name</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="givenName" placeholder="Given Name" maxlength="30">
        </div>
    </div>
    <div class="form-group">
        <label for="middleName" class="col-sm-2 control-label">Middle Name</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="middleName" placeholder="Middle Name" maxlength="30">
        </div>
    </div>
</form>

http://jsfiddle.net/y838v/3/

Based on http://getbootstrap.com/css/#forms-horizontal

Answer 2

add class="form-group col-md-12 nopadding" to div which was currently <div class="form-group">