I'm struggling to center some input boxes within my ASP.NET Core web application. I've experimented with CSS solutions and tried various HTML approaches like using the class = "text-center", but so far, I haven't achieved the desired results. Below is the code snippet I'm currently working with in an attempt to centralize these input boxes on the page:
@page
@model CustomerPageTest.Pages.Customer.AddCustomerModel
@{
ViewData["Title"] = "AddCustomer";
}
@{
Layout = null; //Added
}
<div class="container align-content-center" style="border:solid">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<label asp-for="Customer.name">Name:</label>
<input asp-for="Customer.name" class="form-control text-center" type="text" />
</div>
<div class="form-group">
<label asp-for="Customer.notes">Notes:</label>
<input asp-for="Customer.notes" class="form-control text-center" />
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-dark text-center" />
</div>
</div>
</div>
</div>
This screenshot shows the current layout of the application when executed: https://i.sstatic.net/xrkwp.png
Apologies for the small size of the image, I'm unsure how to enlarge it. Nonetheless, everything remains aligned to the left. Is there a specific bootstrap file that needs to be imported in order to resolve this issue?