Reputation: 23

Bootstrap form alignment not proper

The following code is written for a form but the from is not properly aligned in bootstrap. Although i have divided the form in rows but what i do not understand is that how is the first column not properly aligned. I tried a lot of things but could not figure it out. Pl help me make this alright!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>

<div class="container-fluid">
<form >
<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Roll number:</label>
<div class="col-sm-2">
<input type="text" class="form-control" >
</div></div>

<div class="form-group">
<label class="col-sm-2  ">School code:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Year Of Passing:</label>
<div class="col-sm-2"><input type="text" class="form-control" >
</div></div></div>

<div class="row">
<div class="form-group">
<label class="col-sm-2 ">First Name:</label>
<div class="col-sm-2"> <input type="text" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Middle Name:</label>
<div class="col-sm-2"> <input type="text" class="form-control" >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Last Name:</label>
<div class="col-sm-2"> <input type="text" class="form-control" >
</div></div>
</div>


<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Father's First name:</label>
<div class="col-sm-2"><input type="text" class="form-control" >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Father's Middle name:</label>
<div class="col-sm-2"> <input type="text" class="form-control " >
</div></div>

<div class="form-group ">
<label class="col-sm-2 ">Father's Last name:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>

</div>

<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Mother's First name:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Mother's Middle name:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Mother's Last name:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div>
</div>
</div>

<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Gender:</label>
<div class="col-sm-2"><select class="form-control" >
<option>Male</option>
<option>Female</option>

</select>
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Mobile Number:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Aadhar Number:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>
</div>


<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Email:</label>
<div class="col-sm-2"><input type="email" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">DOB:</label>

<div class="col-sm-1"><select class="form-control " >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>

</select>
</div>
<div class="col-sm-2"><select class="form-control " >
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>

</select>
</div>

<div class="col-sm-2"><select class="form-control " >
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>    
</select>
</div></div>
</div>

<div class="row">
 <div class="form-group">
<label class="col-sm-2 ">Religion:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>



<div class="form-group">
<label class="col-sm-2 ">Age:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Category:</label>
<div class="col-sm-2"> <input type="text" class="form-control " >
</div></div></div>

</form>

</body>
</html>

Upvotes: 0

Answers (3)

Ryan Cole

Reputation: 123

I encountered this while working with django-bootstrap3, using the {% bootstrap_field form.attribute %} template tag.

The problem is that you're using too many form-group tags. You only need one surrounding the entire group of form inputs. After removing the tags, and deleting the now-superfluous divs, I get the following code, which renders without the misalignment of the second and following columns compared to the first:

    <div class="container-fluid">
        <form >
            <div class="form-group">
                <div class="row">
                        <label class="col-sm-2 ">Roll number:</label>
                        <div class="col-sm-2"><input type="text" class="form-control" ></div>
                        <label class="col-sm-2  ">School code:</label>
                        <div class="col-sm-2"><input type="text" class="form-control " ></div>
                        <label class="col-sm-2 ">Year Of Passing:</label>
                        <div class="col-sm-2"><input type="text" class="form-control" ></div>
                </div>
                <div class="row">
                        <label class="col-sm-2 ">First Name:</label>
                        <div class="col-sm-2"> <input type="text" class="form-control " ></div>
                        <label class="col-sm-2 ">Middle Name:</label>
                        <div class="col-sm-2"> <input type="text" class="form-control" ></div>
                        <label class="col-sm-2 ">Last Name:</label>
                        <div class="col-sm-2"> <input type="text" class="form-control" ></div>
                </div>
            </div>
        </form>
    </div>

This looks right on the webserver setup I am using.

I ran into this issue because I was grouping django-bootstrap {% bootstrap_field form.attribute %}tags into rows, but the default behavior is to create a div with the form-group tag for each form field. I overrode it using form_group_class="" Example:

{% bootstrap_field form.jobNum form_group_class="" field_class="col-md-3" label_class="col-md-2 text-right" %}

Upvotes: 2

Robert

Reputation: 6967

Based on your layout I would recommend adding form-horizontal to your <form> and adding control-label to all of your labels. In addition, I would re-organize your form into 3 separate columns like so:

<form class="form form-horizontal">

<div class="col-sm-4">
    <div class="form-group">
        <label class="col-sm-3 control-label">Roll number:</label>
        <div class="col-sm-9"><input type="text" class="form-control" ></div>
    </div>
</div>

<div class="col-sm-4">
    <div class="form-group">
        <label class="col-sm-3 control-label">School code:</label>
        <div class="col-sm-9"><input type="text" class="form-control " ></div>
    </div>
</div>

<div class="col-sm-4">
    <div class="form-group">
        <label class="col-sm-3 control-label">Year Of Passing:</label>
        <div class="col-sm-9"><input type="text" class="form-control" ></div>
    </div>
</div>

</form>

Note: form-horizontal changes the behavior of form-group and causes it to mimic row so you can avoid an additional <div>

Upvotes: 0

Win

Reputation: 62260

The way you use row class is not correct. It should be -

row > col-xs-4 > form-group > col-sm-6


<div class="row">
    <div class="col-sm-4">
        <div class="form-group">
            <label class="col-sm-6">Roll number:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <label class="col-sm-6">School code:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control ">
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <label class="col-sm-6">Year Of Passing:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
</div>

Jsfiddle with form-horizontal and control-label.

https://jsfiddle.net/g6ryga19/

Upvotes: 1

Bootstrap form alignment not proper

Answers (3)

Related Questions