Reputation: 753
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:
<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
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