In the following form on my asp.net mvc core site using Bootstrap 5, the headers and footers only align with the corresponding boxes when the screen size is xl. When anything less, it gets messed up. Any thoughts?
This is the xl view:
enter image description here
This is the <xl view:
enter image description here
<form class="row g-6">
<div class="col-12">
<!-- Header -->
<div class="mb-3">
<h4>
<span class="d-dark-none" style="color: #264692;">Data Entry</span>
<span class="d-light-none" style="color: #BACEFB;">Data Entry</span>
</h4>
</div>
<div class="row">
<!-- Forms -->
<div class="container">
<!-- Form Header -->
<div class="row form-header mb-2">
<div class="col-2 pe-1"><h6>Provider Name</h6></div>
<div class="col pe-1"><h6>Date of Service</h6></div>
<div class="col-1 pe-1"><h6>Code</h6></div>
<div class="col-1 pe-1">
<h6>
<span class="d-dark-none">
Modifier
<i data-feather="info" class="cursor-pointer" data-bs-toggle="modal" data-bs-target="#choosingFacilityTypeModal"></i>
</span>
<span class="d-light-none">
Modifier
<i data-feather="info" class="cursor-pointer" data-bs-toggle="modal" data-bs-target="#choosingFacilityTypeModal"></i>
</span>
</h6>
</div>
<div class="col-1 pe-1"><h6>Units</h6></div>
<div class="col pe-1"><h6>Gross Charge</h6></div>
<div class="col pe-1"><h6>Adjustment</h6></div>
<div class="col pe-1">
<h6>
<span class="d-dark-none">
CDM Price
<i data-feather="info" class="cursor-pointer" data-bs-toggle="modal" data-bs-target="#choosingFacilityTypeModal"></i>
</span>
<span class="d-light-none">
CDM Price
<i data-feather="info" class="cursor-pointer" data-bs-toggle="modal" data-bs-target="#choosingFacilityTypeModal"></i>
</span>
</h6>
</div>
<div class="col"><h6>Insurer Paid</h6></div>
</div>
<!-- Data Entry -->
<div id="form-rows">
<div class="row mt-2">
<!-- Provider Name -->
<div class="col-2 pe-1">
<select class="form-select provider-name">
<option value="">Select</option>
<option>XXXXXXXXXXXXXXXXXXXO</option>
<option>University of Chicag</option>
<option>GSAS Open Labs At Ha</option>
<option>California Institute</option>
</select>
</div>
<!-- Date of Service -->
<div class="col pe-1"><input class="form-control date-of-service" type="date"></div>
<!-- Code -->
<div class="col-1 pe-1">
<input class="form-control code" @* asp-for="NewProvider.Name" *@ id="code" type="text" placeholder="Code" />
<span class="text-danger" @* asp-validation-for="NewProvider.Name" *@></span>
</div>
<!-- Modifier -->
<div class="col-1 pe-1">
<input class="form-control modifier" @* asp-for="NewProvider.Name" *@ id="modifier" type="text" placeholder="Modifier" />
<span class="text-danger" @* asp-validation-for="NewProvider.Name" *@></span>
</div>
<!-- Units -->
<div class="col-1 pe-1">
<input class="form-control units" @* asp-for="NewProvider.Name" *@ id="units" type="text" placeholder="Units" />
<span class="text-danger" @* asp-validation-for="NewProvider.Name" *@></span>
</div>
<!-- Gross Charge -->
<div class="col pe-1">
<input class="form-control gross-charge" @* asp-for="NewProvider.Name" *@ id="grossCharge" type="text" placeholder="0.00" />
<span class="text-danger" @* asp-validation-for="NewProvider.Name" *@></span>
</div>
<!-- Adjustment -->
<div class="col pe-1">
<input class="form-control adjustment" @* asp-for="NewProvider.Name" *@ id="adjustment" type="text" placeholder="0.00" />
<span class="text-danger" @* asp-validation-for="NewProvider.Name" *@></span>
</div>
<!-- CDM Price -->
<div class="col pe-1">
<input class="form-control cdm-price" @* asp-for="NewProvider.Name" *@ id="cdmPrice" type="text" placeholder="0.00" />
<span class="text-danger" @* asp-validation-for="NewProvider.Name" *@></span>
</div>
<!-- Insurer Paid -->
<div class="col">
<input class="form-control insurer-paid" @* asp-for="NewProvider.Name" *@ id="insurerPaid" type="text" placeholder="0.00" />
<span class="text-danger" @* asp-validation-for="NewProvider.Name" *@></span>
</div>
</div>
</div>
<!-- Form Footer -->
<div class="row form-footer mt-2">
<div class="col-2 pe-1"><h6>Provider Name</h6></div>
<div class="col pe-1"><h6>Date of Service</h6></div>
<div class="col-1 pe-1"><h6>Code</h6></div>
<div class="col-1 pe-1">
<h6>
<span class="d-dark-none">
Modifier
<i data-feather="info" class="cursor-pointer" data-bs-toggle="modal" data-bs-target="#choosingFacilityTypeModal"></i>
</span>
<span class="d-light-none">
Modifier
<i data-feather="info" class="cursor-pointer" data-bs-toggle="modal" data-bs-target="#choosingFacilityTypeModal"></i>
</span>
</h6>
</div>
<div class="col-1 pe-1"><h6>Units</h6></div>
<div class="col pe-1"><h6>Gross Charge</h6></div>
<div class="col pe-1"><h6>Adjustment</h6></div>
<div class="col pe-1">
<h6>
<span class="d-dark-none">
CDM Price
<i data-feather="info" class="cursor-pointer" data-bs-toggle="modal" data-bs-target="#choosingFacilityTypeModal"></i>
</span>
<span class="d-light-none">
CDM Price
<i data-feather="info" class="cursor-pointer" data-bs-toggle="modal" data-bs-target="#choosingFacilityTypeModal"></i>
</span>
</h6>
</div>
<div class="col"><h6>Insurer Paid</h6></div>
</div>
<!-- Submission Buttons -->
<div class="col-12">
<div class="d-flex justify-content-end mt-3 mb-3">
<button class="btn btn-primary me-2" type="submit" id="save">Save</button>
<button class="btn btn-subtle-warning me-2" type="button" id="validate">Validate</button>
<button class="btn btn-phoenix-primary" type="button" id="cancel" onclick="window.location.href='/dashboard/landing';">Cancel</button>
</div>
</div>
<div class="col-12">
<div class="d-flex justify-content-end mt-3 mb-3">
<button class="btn btn-outline-secondary rounded-circle" type="button" id="back-to-top" style="width: 37.3438px; height: 37.3438px; padding: 0; display: flex; justify-content: center; align-items: center;">
<i data-feather="arrow-up"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
Perhaps it has something to do with padding?
New contributor
gmlacey is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.