Align a row to the center using bootstrap 4.0

Question

i have the following markup which uses bootstrap 4:-

<div class="container">
    <div class="row">

        <div class="col-xl-4 col-md-6 col-lg-4">
            <div class="footer_widget">
                <h3 class="footer_title">
                    Enter your number
                </h3>
                <form asp-action="Search" method="get" class="newsletter_form">
                    <input type="text" name="number" placeholder="Enter your number" style="height: 50px;
background: #fff;
padding-left: 20px;
font-size: 15px;
color: #000;
border: 1px solid #596672;
border-radius: 30px;
width: 100%;">
                    <button type="submit" style="
    position: absolute;
    height: 40px;
    border: none;
    color: #fff;
    background: #2EBDBE;
    padding: 0 22px;
    cursor: pointer;
    border-radius: 30px;
    top: 5px;
    right: 5px;
    font-size: 13px;
    font-weight: 500;">
                        Submit
                    </button>
                </form>
                <p class="newsletter_text">
                    Enter your number/name and click on submit ....
                </p>
            </div>
        </div>

    </div>
</div>

currently the content will be align to the left, but i want it to be aligned to the center, so how i can do so using bootstrap ?

score 0 · Accepted Answer · answered Jun 17 '20 at 10:59

Bootstrap 4 has utility class to achieve this so try to use class justify-content-center with row like:

<div class="container">
    <div class="row justify-content-center">

        <div class="col-xl-4 col-md-6 col-lg-4">
            <div class="footer_widget">
                <h3 class="footer_title">
                    Enter your number
                </h3>
                <form asp-action="Search" method="get" class="newsletter_form">
                    <input type="text" name="number" placeholder="Enter your number" style="height: 50px;background: #fff;padding-left: 20px;font-size: 15px;color: #000;border: 1px solid #596672;border-radius: 30px;width: 100%;">
                    <button type="submit" style="position: absolute;height: 40px; border: none;color: #fff;background: #2EBDBE; padding: 0 22px; cursor: pointer; border-radius: 30px; top: 5px; right: 5px; font-size: 13px; font-weight: 500;">
                        Submit
                    </button>
                </form>
                <p class="newsletter_text">
                    Enter your number/name and click on submit ....
                </p>
            </div>
        </div>

    </div>
</div>

Hope it helps

Align a row to the center using bootstrap 4.0

1 Answers1