I have implemented a simple bootstrap form with rows and columns in groups of 4. My goal was to create 3 total columns using this layout.
Here is the code snippet:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8e8383989f989e8d9cacd9c2dec2de">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<form asp-controller="Profiles" asp-action="Index" asp-route-returnurl="@ViewData[" ReturnUrl "]" method="post" class="mt-4 pt-2 needs-validation" role="form" novalidate>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm order-2 order-sm-1">
<div class="d-flex align-items-start mt-3 mt-sm-0">
<div class="flex-shrink-0">
<div class="avatar-xl me-3">
<div class="circle">
<span class="initials">@Model.NameAbbrv</span>
</div>
</div>
</div>
<div class="flex-grow-1">
<div>
<h5 class="font-size-16 mb-1">@Model.Username</h5>
<p class="text-muted font-size-13">@Model.Roles<br/>@Model.Email</p>
</div>
</div>
</div>
</div>
</div>
<hr/>
<h5 class="mt-4 mb-3">Manage Password</h5>
<div class="row">
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Current Password</label>
<div class="input-group">
<input asp-for="ChangePassword.OldPassword" class="form-control" id="currentPassword" required autofocus />
<button class="btn btn-light shadow-none ms-0" type="button" id="toggleCurrentPassword" tabindex="99"><i class="mdi mdi-eye-outline"></i></button>
</div>
<span asp-validation-for="ChangePassword.OldPassword" class="text-danger"></span>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">New Password</label>
<div class="input-group">
<input asp-for="ChangePassword.NewPassword" id="newPassword" class="form-control" required autofocus />
<button class="btn btn-light shadow-none ms-0" type="button" id="toggleNewPassword" tabindex="99"><i class="mdi mdi-eye-outline"></i></button>
</div>
<span asp-validation-for="ChangePassword.NewPassword" class="text-danger"></span>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Confirm Password</label>
<div class="input-group">
<input asp-for="ChangePassword.ConfirmPassword" id="confirmPassword" class="form-control" required autofocus />
<button class="btn btn-light shadow-none ms-0" type="button" id="toggleConfirmPassword" tabindex="99"><i class="mdi mdi-eye-outline"></i></button>
</div>
<span asp-validation-for="ChangePassword.ConfirmPassword" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Update Password</label>
<button class="btn btn-primary">Update Password</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>Despite following this structure, I encountered an issue where the third column breaks into a new line. Can anyone identify what might be causing this problem? I have spent several hours troubleshooting but have been unable to locate the error. Any assistance would be greatly appreciated. Thank you!