CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2011126
user2011126

Reputation: 71

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>

Upvotes: 0

Views: 85

Answers (2)

Max Sinev
Max Sinev

Reputation: 6034

This is mis-alignment came from form-group class margin-bottom: 15px css rule. You can work with forms without this class if it's necessary or create your class for these form groups with margin-bottom: 0

Also I propose to set 100% width for input or use bootstrap class form-control to avoid columns overlapping.

P.S. Check the form-horizontal helpers class maybe it will be more useful for you. I slightly changed your example with form-horizontal JSFiddle

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12181

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>

Upvotes: 1

Related Questions