Bootstrap responsive form do not display columns correctly-CodePudding

I have a simple bootstrap form and I use row with 12 columns, that columns are divided in 3 different groups of 4 columns so, I should have 3 total columns

My code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />


<form asp-controller="Profiles" asp-action="Index" asp-route-returnurl="@ViewData[" ReturnUrl "]" method="post"  role="form" novalidate>
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >
              <div >
                <div >
                  <div >
                    <div >
                      <span >@Model.NameAbbrv</span>
                    </div>
                  </div>
                </div>
                <div >
                  <div>
                    <h5 >@Model.Username</h5>
                    <p >@Model.Roles<br/>@Model.Email</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <hr/>
          <h5 >Manage Password</h5>
          <div >
            <div >
              <div >
                <label >Current Password</label>
                <div >
                  <input asp-for="ChangePassword.OldPassword"  id="currentPassword" required autofocus />
                  <button  type="button" id="toggleCurrentPassword" tabindex="99"><i ></i></button>
                </div>
                <span asp-validation-for="ChangePassword.OldPassword" ></span>
              </div>
            </div>
            <div >
              <div >
                <label >New Password</label>
                <div >
                  <input asp-for="ChangePassword.NewPassword" id="newPassword"  required autofocus />
                  <button  type="button" id="toggleNewPassword" tabindex="99"><i ></i></button>
                </div>
                <span asp-validation-for="ChangePassword.NewPassword" ></span>
              </div>
            </div>
          </div>
          <div >
            <div >
              <label >Confirm Password</label>
              <div >
                <input asp-for="ChangePassword.ConfirmPassword" id="confirmPassword"  required autofocus />
                <button  type="button" id="toggleConfirmPassword" tabindex="99"><i ></i></button>
              </div>
              <span asp-validation-for="ChangePassword.ConfirmPassword" ></span>
            </div>
          </div>
        </div>
        <div >
          <button >Update Password</button>
        </div>
      </div>
    </div>
  </div>
</form>

For some reason the third column just break into a new line, any one can see something wrong? I run into this a couple of hours and can not find the error. Help is very appreciated, regards

CodePudding user response：

Hi you have nested to many things one inside the other please replace the below added code

<form asp-controller="Profiles" asp-action="Index" asp-route-returnurl="@ViewData[" ReturnUrl "]" method="post"  role="form" novalidate>
      <div >
        <div >
          <div >
            <div >
              <div >
                <div >
                  <div >
                    <div >
                      <div >
                        <div >
                          <span >@Model.NameAbbrv</span>
                        </div>
                      </div>
                    </div>
                    <div >
                      <div>
                        <h5 >@Model.Username</h5>
                        <p >@Model.Roles<br/>@Model.Email</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr/>
              <h5 >Manage Password</h5>
              <div >
                <div >
                  <div >
                    <label >Current Password</label>
                    <div >
                      <input asp-for="ChangePassword.OldPassword"  id="currentPassword" required autofocus />
                      <button  type="button" id="toggleCurrentPassword" tabindex="99"><i ></i></button>
                    </div>
                    <span asp-validation-for="ChangePassword.OldPassword" ></span>
                  </div>
                </div>
                <div >
                  <div >
                    <label >New Password</label>
                    <div >
                      <input asp-for="ChangePassword.NewPassword" id="newPassword"  required autofocus />
                      <button  type="button" id="toggleNewPassword" tabindex="99"><i ></i></button>
                    </div>
                    <span asp-validation-for="ChangePassword.NewPassword" ></span>
                  </div>
                </div>
              </div>
              <div >
                <div >
                  <label >Confirm Password</label>
                  <div >
                    <input asp-for="ChangePassword.ConfirmPassword" id="confirmPassword"  required autofocus />
                    <button  type="button" id="toggleConfirmPassword" tabindex="99"><i ></i></button>
                  </div>
                  <span asp-validation-for="ChangePassword.ConfirmPassword" ></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div >
          <button >Update Password</button>
        </div>
      </div>
    </form>

my suggestion for you is to use simple way


    <div class='row'>
     <div class='col-4'> first set of code here </div>
     <div class='col-4'> second set of code here </div>
     <div class='col-4'> third set of code here </div>
    </div>