Reputation: 13448

Bootstrap - checkbox left aligning issue

I Have the following bootstrap form broken into groups.

I am trying to add a checkbox but, it doesn't seem to left align correctly.

How can i make the check box left align and under the "Max Amount" ?

and i want to add radio button to the next group.

      <div class="panel panel-primary">
        <div class="panel-heading"> Information</div>
        <div class="panel-body">


          <!---->
 <fieldset>
        <legend> Borrowing Power</legend>

        <div class='row'>
            <div class='col-sm-6'>
                <div class='form-group'>
                    <label for="user_password">Desired Amount</label>
                    <!--<input class="form-control" id="user_password" name="user[password]" size="30" type="password" /> -->
                    <input name="desiredamount" id="" class="form-control input-normal desiredLoan">
                </div>
            </div>
            <div class='col-sm-6'>
                <div class='form-group'>
                    <label for="user_password_confirmation" class="">Max Loan Amount</label><br>
                    <input class="form-control pull-left" id="" name="" class="pull-left" type="checkbox" />
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>Personal Information</legend>
        <div class='row'>
            <div class='col-sm-4'>    
                <div class='form-group'>
                    <label for="user_title">Title</label>
                    <input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
                </div>
            </div>
            <div class='col-sm-4'>
                <div class='form-group'>
                    <label for="user_firstname">First name</label>
                    <input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
                </div>
            </div>
            <div class='col-sm-4'>
                <div class='form-group'>
                    <label for="user_lastname">Last name</label>
                    <input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='col-sm-12'>
                <div class='form-group'>

                    <label for="user_email">Email</label>
                    <input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>Options</legend>
        <div class='row'>
            <div class='col-sm-12'>
                <div class='form-group'>
                    <label for="user_locale">Language</label>
                    <select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option>
                        <option value="en">English</option></select>
                </div>
            </div>
        </div>
    </fieldset>
         <!---->

</div>

<div class="container-fluid"><!-- Row 2 -->



<!--
    <div class="col-lg-4" id="userFormColumn2">


        <div class="form-group">
            <label for="mobile">Mobile Phone</label>
            <input name="mobile" id="mobile" class="form-control input-normal">
            <p class="help-block">The users mobile phone number.</p>
        </div>


    </div>
    <div class="col-lg-4" id="userFormColumn2">

        <div class="form-group">
            <label for="level">User Access Level</label>
                <select name="level" id="level" class="form-control input-normal">
                    <option value="1">1</item>
                    <option value="2">2</item>
                </select>
            <p class="help-block">The users system access level.</p>
        </div>

    </div>  --->


          <!---->

        </div>          





      </div>

Upvotes: 1

Answers (3)

amansinghgusain

Reputation: 774

The problem is in form-control class which has width:100%
Solution
Add another class after form-control class

<input class="form-control auto-width pull-left" id="" name="" class="pull-left" type="checkbox" />

.auto-width {
    width: auto;
  }

Upvotes: 2

neophyte

Reputation: 6626

In this way I normally achieve it...just use column nesting

check the snippet I have nested class="col-sm-2" column inside class="col-sm-6" and added a margin-top

#check {
margin-top: -5px;
}

<!DOCTYPE html>
<html>


<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           </head>
<body >
  

<div class="panel panel-primary">
        <div class="panel-heading"> Information</div>
        <div class="panel-body">


          <!---->
 <fieldset>
        <legend> Borrowing Power</legend>

        <div class='row'>
            <div class='col-sm-6'>
                <div class='form-group'>
                    <label for="user_password">Desired Amount</label>
                    <!--<input class="form-control" id="user_password" name="user[password]" size="30" type="password" /> -->
                    <input name="desiredamount" id="" class="form-control input-normal desiredLoan">
                </div>
            </div>
            <div class='col-sm-6'>
                <div class='form-group'>
                    <label for="user_password_confirmation" class="">Max Loan Amount</label><br>
                      <div class='col-sm-2' id="check">
                    <input class="form-control pull-left" id="" name="" class="pull-left" type="checkbox" />
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>Personal Information</legend>
        <div class='row'>
            <div class='col-sm-4'>    
                <div class='form-group'>
                    <label for="user_title">Title</label>
                    <input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
                </div>
            </div>
            <div class='col-sm-4'>
                <div class='form-group'>
                    <label for="user_firstname">First name</label>
                    <input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
                </div>
            </div>
            <div class='col-sm-4'>
                <div class='form-group'>
                    <label for="user_lastname">Last name</label>
                    <input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='col-sm-12'>
                <div class='form-group'>

                    <label for="user_email">Email</label>
                    <input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>Options</legend>
        <div class='row'>
            <div class='col-sm-12'>
                <div class='form-group'>
                    <label for="user_locale">Language</label>
                    <select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option>
                        <option value="en">English</option></select>
                </div>
            </div>
        </div>
    </fieldset>
         <!---->

</div>

<div class="container-fluid"><!-- Row 2 -->



<!--
    <div class="col-lg-4" id="userFormColumn2">


        <div class="form-group">
            <label for="mobile">Mobile Phone</label>
            <input name="mobile" id="mobile" class="form-control input-normal">
            <p class="help-block">The users mobile phone number.</p>
        </div>


    </div>
    <div class="col-lg-4" id="userFormColumn2">

        <div class="form-group">
            <label for="level">User Access Level</label>
                <select name="level" id="level" class="form-control input-normal">
                    <option value="1">1</item>
                    <option value="2">2</item>
                </select>
            <p class="help-block">The users system access level.</p>
        </div>

    </div>  --->


          <!---->

        </div>          





      </div>
</body>

</html>

Hope this helps!

Upvotes: 1

Banshi Lal Dangi

Reputation: 685

Just try by removing "form-control" class from Checkbox

Upvotes: 1

Bootstrap - checkbox left aligning issue

Answers (3)

Related Questions