justify content center within modal not working - html

Question

I am trying to use the justify-content-center within a modal but for some it does not render like it should..
I am trying to render a button in the middle of a div
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<img class="card-img-top" src="{% static "images/manager_happy.png"%}" alt="Card image cap">
<div class="modal-body">
<h5>Improve your managerial skills by understanding who is in your team</h5>
<hr>
<div class="container">
<div class="row">
<div class="col">
<div class="price-modal-container">
<span class="modal-price-title">Price:</span><span class="modal-price">60$</span><span class="modal-Oprice">299$</span><span class="modal-discount">60% off</span>
</div>
<div class="time-price">
<i class="far fa-clock fa-spin"></i>Limited time offer discount
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col">
<span class="glyphicon glyphicon-plus"></span> Add Credit Now
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<span class="glyphicon glyphicon-plus"></span> Add Credit Now
</div>
</div>
</div>
</div>
Any idea it does not work ? is there any trouble because of the modal ?

Answer 1

Are you trying to render it so the button is horizontally centered? Right now it's not working because the col class takes up all the remaining width. So you can either make the content inside the column centered or make it so the column itself doesn't take up the full width.
To center the content inside the column you just need add the text-center class either to the column or by simply replacing justify-content-center on the row.
<div class="row text-center">
<div class="col">
<span class="glyphicon glyphicon-plus"></span> Add Credit Now
</div>
</div>
Alternatively you can keep the row the way it is and change the column class from col to col-auto so it won't take the full width.
<div class="row justify-content-center">
<div class="col-auto">
<span class="glyphicon glyphicon-plus"></span> Add Credit Now
</div>
</div>