0

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>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
d00d
  • 688
  • 1
  • 8
  • 29

1 Answers1

2

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • That did not have any effect on my items. I now changed to to make the text push the input more to the right side. – d00d May 19 '21 at 08:42
  • Yes, obviously using all 12 column units will widen the space, but regarding "float-right" your question has been answered. – Carol Skelly May 19 '21 at 12:49