Bootstrap form column alignment

Question

I've created a Bootstrap 4 form with this layout

And the Razor page code to generate it is:

@page
@model HighStreetLeads3.Pages.Leads.EditModel

@{
ViewData["Title"] = "Edit";
Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h1>Edit</h1>

<h4>Lead</h4>
<hr />
<form class="form-inline col-lg-12" method="post">
<div>

    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Lead.Id" />

</div>

<div class="row col-12">

    <div class="col-6">
        <div class="form-group">
            <div class="col-3">
                <label asp-for="Lead.Name" class="control-label float-left">Name</label>
            </div>
            <div class="col-9">
                <input asp-for="Lead.Name" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.Name" class="text-danger"></span>
            </div>

        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <div class="col-3">
                <label asp-for="Lead.PhoneNumber" class="control-label float-left">Number</label>
            </div>
            <div class="col-9">
                <input asp-for="Lead.PhoneNumber" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.PhoneNumber" class="text-danger"></span>
            </div>
        </div>
    </div>
</div>

<div class="row col-12">
    <div class="col-6">
        <div class="form-group">
            <div class="col-3">
                <label asp-for="Lead.Status" class="control-label float-left"></label>
            </div>
            <div class="col-9">
                <input asp-for="Lead.Status" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.Status" class="text-danger"></span>
            </div>

        </div>
    </div>
    <div class="col-6">
        <div class="form-group">

            <div class="col-3">
                <label asp-for="Lead.NextAction" class="control-label float-left">Next Action</label>
            </div>


            <div class="col-9">
                <input asp-for="Lead.NextAction" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.NextAction" class="text-danger"></span>
            </div>

        </div>
    </div>
</div>

<div class="row col-12">
    <div class="col-6">
        <div class="form-group">
            <div class="col-3">
                <label asp-for="Lead.WebAddress" class="control-label float-left">URL</label>
            </div>
            <div class="col-9">
                <input asp-for="Lead.WebAddress" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.WebAddress" class="text-danger"></span>
            </div>

        </div>
    </div>
    <div class="col-6">
        <div class="form-group">

            <div class="col-3">
                <label asp-for="Lead.ContactName" class="control-label float-left">Contact</label>
            </div>


            <div class="col-9">
                <input asp-for="Lead.ContactName" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.ContactName" class="text-danger"></span>
            </div>

        </div>
    </div>
</div>

<div class="row col-12">
    <div class="col-6">
        <div class="form-group text-left">
            <div class="col-3">
                <label asp-for="Lead.Where" class="control-label float-left">Address</label>
            </div>
            <div class="col-9">
                <input asp-for="Lead.Where" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.Where" class="text-danger"></span>
            </div>

        </div>
    </div>

</div>

<div class="row col-12">
    <div class="col-12">
        <div class="form-group">
            <div class="col-1 mr-0 pr-0">
                <label asp-for="Lead.Notes" class="control-label col-3 float-left"></label>
            </div>
            <div class="col-8">
                <input asp-for="Lead.Notes" class="form-control mb-2 ml-5" style="width:100%" />
                <span asp-validation-for="Lead.Notes" class="text-danger"></span>

            </div>
            <div class="col-2  ml-5 float-right">
                <input type="submit" value="Save" class="btn btn-primary" />
                </div>
            </div>

        </div>
    </div>

@*<div class="form-group col-1 offset-11">
    <input type="submit" value="Save" class="btn btn-primary" />
</div>*@

I can add the page model in if anyone needs it, but I don't think it's relevant, and the css is the standard bootstrap. So..... as you can see, the majority of the form is in two columns, but the last field (Notes) takes up more of the screen width. Because of this, I can't get the label or the entry field for Notes to line up with the previous fields. I've tried fiddling about with margins and padding, but I can't get an exact line up. It feels like I need to be able to ask Bootstrap for a width of a fractional column. Is there a way of getting this last field laid out so it aligns with the previous ones?

Any input gratefully received. Nick

Answer 1

You use col-3 in <div class="col-6">,so you need to set col-1.5 in <div class="col-12">,but there is no col-1.5,so you can only try to set the css and make it close to col-1.5:

<div class="row col-12">
    <div class="col-12">
        <div class="form-group">
            <div class="col-md-1" style="flex: 0 0 12.15%;max-width: 12.15%;">
                <label asp-for="Lead.Notes" class="control-label float-left"></label>
            </div>
            <div class="col-8">
                <input asp-for="Lead.Notes" class="form-control mb-2 ml-5" style="width:100%" />
                <span asp-validation-for="Lead.Notes" class="text-danger"></span>

            </div>
            <div class="col-2  ml-5 float-right">
                <input type="submit" value="Save" class="btn btn-primary" />
                </div>
            </div>

        </div>
    </div>

result: