How to center items in container grid - html

Question

How can I center text and image?
Here is my code
<div class="container my-5">
<div class="row py-4 justify-content-center">
<div class="col-lg-4 mb-4">
<h1 class="text-dark font-weight-bold mb-3">
We've been expecting you
</h1>
<p class="mb-4">At our core is a collection of design and development solutions</p>
</div>
<div class="col-lg-8"><img src='assets/about.png' class="w-80"></div>
</div>
</div>
I tried to implement justify-center, offset,ml-x ,but nothing seems to work? I've already read the bootstrap library and haven't found anything that could help me

Answer 1

In your row, you have a 4 column wide column and an 8 column wide column, so you’re already taking up the full 12 columns, so the content in the row won’t “center.”
Your image will be whatever width it is as w-80 isn’t a Bootstrap 4 class – try w-75 or add your own class for w-80 (although if the image is only 80% of the column, the column won’t look centered - the content is already taking up the full width).
You could make the two columns 3 & 7, and then use a 1 column offset to have the two columns in the center (with the image at 100% of the 7 column width).
<div class="container my-5">
<div class="row py-4">
<div class="col-lg-3 offset-lg-1 mb-4">
<h1 class="text-dark font-weight-bold mb-3">
We've been expecting you
</h1>
<p class="mb-4">At our core is a collection of design and development solutions</p>
</div>
<div class="col-lg-7"><img src='bg400x240-1.png' class="w-100"></div>
</div>
</div>