user2011126 user2011126 - 1 year ago 37
CSS Question

Bootstrap Form Alignment Issues

I have just started using bootstrap. Eventually, I want to create a web page that will work on all form factors.

With this page, I am creating a form with 2 rows with 3 columns in each. When I make the view larger, the fields in the second and third columns get misaligned.
Does anyone have suggestions?

Here is my Jsfiddle, and here's the HTML:

<body>
<div class="container body-content">
<div class="container-fluid">
<form action="/Bills/AddBill" method="post">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>

<div id="row1 " class="row">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="User_Id:">User Id:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9">
<input class="text-box single-line" id="UserId" name="UserId" type="text" value="rrg">
</div>

</div>

<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="Bill_Dt:">Bill Dt:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left">
<input class="datepicker hasDatepicker" id="FbDt" name="FbDt" placeholder="Freight Bill Date" type="text" value="1/1/0001 12:00:00 AM">
</div>

</div>

<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="Ship_Dt:">Ship Dt:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left">
<input class="datepicker hasDatepicker" id="ShipDt" name="ShipDt" placeholder="Ship Date" type="text" value="">
</div>

</div>
</div>

<div id="row2 " class="row">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="SCAC:">SCAC:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left">
<input class="text-box single-line" id="SCAC" name="SCAC" type="text" value="">
</div>

</div>

<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="Pro_Number:">Pro Number:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9">
<input class="text-box single-line" id="ProNum" name="ProNum" type="text" value="">
</div>

</div>

<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="Bill_of_Laden:">Bill of Laden:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9">
<input class="text-box single-line" id="BillOfLaden" name="BillOfLaden" type="text" value="">
</div>

</div>
</div>
</form>
</div>
</div>

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
</body>

Answer Source

Here you go with a solution https://jsfiddle.net/va7mh47m/9/

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <form action="/Bills/AddBill" method="post">
    <div id="row1" class="row">
      
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
          <label for="User_Id:">User Id:</label>
          <input class="text-box single-line" id="UserId" name="UserId" type="text" value="rrg">
        </div>
      </div>
  
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
          <label for="Bill_Dt:">Bill Dt:</label>
          <input class="datepicker hasDatepicker" id="FbDt" name="FbDt" placeholder="Freight Bill Date" type="text" value="1/1/0001 12:00:00 AM">
        </div>
      </div>

      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
          <label for="Ship_Dt:">Ship Dt:</label>
          <input class="datepicker hasDatepicker" id="ShipDt" name="ShipDt" placeholder="Ship Date" type="text" value="">
        </div>
      </div>
    </div>

    <div id="row2 " class="row">
      
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
          <label for="SCAC:">SCAC:</label>
          <input class="text-box single-line" id="SCAC" name="SCAC" type="text" value="">
        </div>
      </div>

      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
          <label for="Pro_Number:">Pro Number:</label>
          <input class="text-box single-line" id="ProNum" name="ProNum" type="text" value="">
        </div>
      </div>
 
     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
          <label for="Bill_of_Laden:">Bill of Laden:</label>
          <input class="text-box single-line" id="BillOfLaden" name="BillOfLaden" type="text" value="">
        </div>
      </div>
    </div>
  </form>
</div>

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download