Bootstrap 4 - how to make text be in relative position to each other? - html

Question

I have this piece of code:
<div class="container">
<div class="border rounded-lg" style="height:500px;">
<div class="ml-2 mt-2">
<h1 class="display-3">#Model.Name</h1>
<!-- Image and pay box -->
<div class="mt-4 container">
<img src="~/Resources/default.jpg" class="" style="height:300px;" />
<div class="d-inline align-top float-right border rounded-lg" style="height:250px;width:250px;">
#if (!Model.OnSale)
{
<h3 class="mt-2 text-nowrap text-center text-warning">#Model.Price</h3>
}
else
{
<div class="row">
<div class="col-2 text-center">
<div class="text-secondary font-italic" style="text-align:center;"><s>#Model.PriceBeforeDiscount</s></div>
<div class="mt-2 text-nowrap text-warning">#Model.Price</div>
</div>
</div>
}
<button class="btn btn-success text-white text-center font-weight-bold w-100 mt-3">
BUY NOW
</button>
given a model, it looks like
I want to center both price texts (the ones on the right), but for some reason, it will refuse to use "text-center", any ideas on how I can solve this? (the # sign is just from Razor syntax, it's the variables it displays)

Answer 1

The text prices are center aligned in your code but they're being constrained by the column width
col-2 should be col-12_ thus:
#if (!Model.OnSale)
{
<h3 class="mt-2 text-nowrap text-center text-warning">#Model.Price</h3>
}
else
{
<div class="row">
<div class="col-12 text-center">
<div class="text-secondary font-italic"><s>#Model.PriceBeforeDiscount</s></div>
<div class="mt-2 text-nowrap text-warning">#Model.Price</div>
</div>
</div>
}
I can't recreate the code here but have tested it locally and col-12 appears to solve the problem

Answer 2

Have you tried <div class="row d-flex justify-content-center"></div>
This should work