title: Responsive bootstrap design causing divs to shift with addition of help-block
body: <p>I am a noob in terms of css. </p>
  
  <p>I have used Bootstrap Validator plugin from <a href="http://bootstrapvalidator.votintsev.ru/settings/" rel="nofollow noreferrer">here</a> along with <a href="https://github.com/morteza/bootstrap-rtl" rel="nofollow noreferrer">Bootstrap Rtl</a> in my asp.net web forms website.</p>
  
  <p>My issue is that whenever there is an error in a field, some fields which are below the one which has error gets shifted &amp; makes them look bad.</p>
  
  <p>For Eg: 
  a) Initial Placement of Fields.
  <a href="https://i.stack.imgur.com/iMUs4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iMUs4.png" alt="enter image description here"></a></p>
  
  <p>b) Once there is an error/help-block added by bootstrap validator/on focus.
  <a href="https://i.stack.imgur.com/Rxzua.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rxzua.png" alt="enter image description here"></a>
  c) Focus to another field 
  <a href="https://i.stack.imgur.com/0ckzx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0ckzx.png" alt="enter image description here"></a>
  I would like to prevent this from happening. I believe this is a problem with bootstrap css. I tried using pull-right class on the drop down's parent div &amp; it does not work </p>
  
  <p>Here is my code shortened for brevity: </p>
  
  <pre><code>&lt;div class="form-group col-xs-12 col-sm-3 "&gt;
          &lt;asp:Label ID="lblFirstName" runat="server" Text="الاسم الأول" AssociatedControlID="txtFirstName" CssClass="control-label" &gt;&lt;/asp:Label&gt;
  
          &lt;asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control OnlyArabic " placeholder="الاسم الأول" MaxLength="144" required
              data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال الاسم الأول"              
              &gt;&lt;/asp:TextBox&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group col-xs-12 col-sm-3 "&gt;
          &lt;asp:Label ID="lblMiddleName" runat="server" Text="اسم الأب" AssociatedControlID="txtMiddleName" CssClass="control-label" &gt;&lt;/asp:Label&gt;
          &lt;asp:TextBox ID="txtMiddleName" runat="server" CssClass="form-control OnlyArabic " placeholder="اسم الأب" MaxLength="144" required
              data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال اسم الأب"
      &lt;/div&gt;
  
      &lt;div class="form-group col-xs-12 col-sm-3 "&gt;
          &lt;asp:Label ID="lblThirdName" runat="server" Text="اسم الجد" AssociatedControlID="txtThirdName" CssClass="control-label" &gt;&lt;/asp:Label&gt;
          &lt;asp:TextBox ID="txtThirdName" runat="server" CssClass="form-control OnlyArabic " placeholder="اسم الجد" MaxLength="144" required
               data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال اسم الجد "
      &lt;/div&gt;
  
      &lt;div class="form-group col-xs-12 col-sm-3 "&gt;
          &lt;asp:Label ID="lblFamilyName" runat="server" Text="اسم العائلة" AssociatedControlID="txtFamilyName" CssClass="control-label" &gt;&lt;/asp:Label&gt;
          &lt;asp:TextBox ID="txtFamilyName" runat="server" CssClass="form-control OnlyArabic " placeholder="اسم العائله" MaxLength="144" required
              data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال اسم العائلة "
      &lt;/div&gt;
  
  
      &lt;div class="form-group col-xs-12 col-sm-6 "&gt;
          &lt;asp:Label ID="lblNationality" runat="server" Text="الجنسية" AssociatedControlID="ddlNationality" CssClass="control-label" &gt;&lt;/asp:Label&gt;
          &lt;asp:DropDownList ID="ddlNationality" runat="server" CssClass="MakeSelect2 form-control" DataSourceID="objDSNationality" DataTextField="Description" DataValueField="Code"
              data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال الجنسية" 
              &gt;
          &lt;/asp:DropDownList&gt;
  
      &lt;/div&gt;
      &lt;div class="form-group col-xs-12 col-sm-6 "&gt;
          &lt;asp:Label ID="lblIdTypeCode" runat="server" Text="نوع الهوية" AssociatedControlID="ddlIdTypeCode" CssClass="control-label" &gt;&lt;/asp:Label&gt;
          &lt;asp:DropDownList ID="ddlIdTypeCode" runat="server" CssClass="MakeSelect2 form-control idType " DataSourceID="objDSIdTypeCode" DataTextField="Description" DataValueField="Code"
          data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال نوع الهوية" &gt;
          &lt;/asp:DropDownList&gt;    
      &lt;/div&gt;
      &lt;div class="form-group col-xs-12 col-sm-6 "&gt;
          &lt;asp:Label ID="lblIDNo" runat="server" Text="رقم الهوية" AssociatedControlID="txtIDNo" CssClass="control-label" &gt;&lt;/asp:Label&gt;
          &lt;asp:TextBox ID="txtIDNo" runat="server" CssClass="form-control  AllowAlphaNumeric  idno" placeholder="رقم الهوية" MaxLength="10" required
              data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال رقم الهوية" 
              &gt;&lt;/asp:TextBox&gt;
      &lt;/div&gt;
  </code></pre>