How to center items in container grid

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

this is what you could be looking for? https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment — mrpbennett, Mar 13 '21 at 22:37

score 1 · Accepted Answer · answered Mar 13 '21 at 22:37

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>

How to center items in container grid

1 Answers1