d00d
d00d

Reputation: 753

Right alignment of input fields in a form does not work

I have a Form with three columns and multiple pairs of label + input in each column. I'm struggling with having the input field to be aligned to the right end of the row. I used to use pull-right in bootstrap 3 for that but cannot figure out what's the equivalent to that in V5. I already tried justify-content-end, float-right, and align-items-right but with no effect.

That's what it currently looks like:

enter image description here

<form>
    <div class="row">
        <div class="col-md-4">
            <div class="row m-1">
                <label class="col-sm-5 col-form-label">PurchasePrice</label>
                <div class="col-sm-4 align-self-end d-flex justify-content-end">
                    <input asp-for="PurchasePrice" class="form-control align-self-end d-flex justify-content-end" />
                    <span asp-validation-for="PurchasePrice" class="text-danger"></span>
                </div>
            </div>
            <div class="row m-1">
                <label class="col-sm-5 col-form-label">BasicPrice</label>
                <div class="col-sm-4">
                    <input asp-for="BasicPrice" class="form-control float-right" />
                    <span asp-validation-for="BasicPrice" class="text-danger"></span>
                </div>
            </div>

            <div class="row m-1">
                <label class="col-sm-5 col-form-label">Discount</label>
                <div class="col-sm-4">
                    <input asp-for="Discount" class="form-control float-right" />
                    <span asp-validation-for="Discount" class="text-danger"></span>
                </div>
            </div>

            <div class="row m-1">
                <label asp-for="RetailPrice" class="col-sm-5 col-form-label">RetailPrice</label>
                <div class="col-sm-4">
                    <input asp-for="RetailPrice" class="form-control float-right" />
                    <span asp-validation-for="RetailPrice" class="text-danger"></span>
                </div>
            </div>
            <div class="row m-1">
                <label asp-for="IncludedDealerOptionPrice" class="col-sm-5 col-form-label">Gesamtnachlass auf Basisfahrzeug</label>
                <div class="col-sm-4">
                    <input asp-for="IncludedDealerOptionPrice" class="form-control float-right" />
                    <span asp-validation-for="IncludedDealerOptionPrice" class="text-danger"></span>
                </div>
            </div>
            <div class="row m-1">
                <label asp-for="Listprice" class="col-sm-5 col-form-label">ListPrice</label>
                <div class="col-sm-4">
                    <input asp-for="ListPrice" class="form-control float-right" />
                    <span asp-validation-for="ListPrice" class="text-danger"></span>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="row m-1">
                <label asp-for="OverallDiscountBasic" class="col-sm-5 col-form-label">Gesamtnachlass auf Basisfahrzeug (%)</label>
                <div class="col-sm-4">
                    <input asp-for="OverallDiscountBasic" class="form-control float-right" />
                    <span asp-validation-for="OverallDiscountBasic" class="text-danger"></span>
                </div>
            </div>
            <div class="row m-1">
                <label class="col-sm-5 col-form-label">Gesamtnachlass auf Listenpreis (%)</label>
                <div class="col-sm-4">
                    <input asp-for="OverallDiscountList" class="form-control float-right" />
                    <span asp-validation-for="OverallDiscountList" class="text-danger"></span>
                </div>
            </div>

            <div class="row m-1">
                <label class="col-sm-5 col-form-label">Gesamtnachlass inkl. Händleroptionen (%)</label>
                <div class="col-sm-4">
                    <input asp-for="OverallDealerDiscount" class="form-control float-right" />
                    <span asp-validation-for="OverallDealerDiscount" class="text-danger"></span>
                </div>
            </div>

            <div class="row m-1">
                <label asp-for="RetailPrice" class="col-sm-5 col-form-label">Überbewertung Wholesale (€)</label>
                <div class="col-sm-4">
                    <input asp-for="OvervaluationWholeSale" class="form-control float-right" />
                    <span asp-validation-for="OvervaluationWholeSale" class="text-danger"></span>
                </div>
            </div>

            <div class="row m-1">
                <label asp-for="Listprice" class="col-sm-5 col-form-label">Überbewertung Merbag (€)</label>
                <div class="col-sm-4">
                    <input asp-for="OvervaluationMerbag" class="form-control float-right" />
                    <span asp-validation-for="OvervaluationMerbag" class="text-danger"></span>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="row m-1">
                <label asp-for="DealerDiscountList" class="col-sm-5 col-form-label">Dealer Discount Basisfahrzeug (%)</label>
                <div class="col-sm-4">
                    <input asp-for="DealerDiscountBasic" class="form-control float-right" />
                    <span asp-validation-for="DealerDiscountBasic" class="text-danger"></span>
                </div>
            </div>
            <div class="row m-1">
                <label class="col-sm-5 col-form-label">Dealer Discount Listenpreis (%)</label>
                <div class="col-sm-4">
                    <input asp-for="DealerDiscountList" class="form-control float-right" />
                    <span asp-validation-for="DealerDiscountList" class="text-danger"></span>
                </div>
            </div>
            <div class="row m-1">
                <label class="col-sm-5 col-form-label">Verbleibende Marge (€)</label>
                <div class="col-sm-4">
                    <input asp-for="Margin" class="form-control float-right" />
                    <span asp-validation-for="Margin" class="text-danger"></span>
                </div>
            </div>
        </div>
    </div>
</form>

Upvotes: 0

Views: 272

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

According to the Bootstrap 5 migration guide...

float-right is now float-end

There is no align-items-right class.

Bootstrap 5 navbar align items right

Upvotes: 2

Related Questions