I have 3 divs, I want to align "div2" to the center of the page and "div3" at the end while being in the same row.

I've been trying some things like the "d-flex justify-content-center" that I'm currently using or making "div1" a row and giving "div3" the class "ml-auto" but then I don't know how to align "div1" to the center.

I'm using Bootstrap 5.

My actual result

<div class="text-center mt-2" id="div1">
        <div class="d-flex justify-content-center" id="div2">
            <a class="btn btn-lg btn-success" href="#"> Link 1 </a>
        </div>
        <div class="d-flex justify-content-end" id="div3">
            <a class="btn btn-lg btn-info" href="#"> Link 2 </a>
            <a class="btn btn-lg btn-info" href="#"> Link 3 </a>
        </div>
    </div>

CodePudding user response：

One way is to use nested flexbox items. For this you'll need an empty spacer for the left, and each child item needs flex: 1:

.flex1 {
   flex: 1;
}

<div class="text-center mt-2 d-flex w-100" id="div1">
    <div class="d-flex flex1"><!--spacer --></div>
    <div class="d-flex flex1 justify-content-center" id="div2">
        <a class="btn btn-lg btn-success" href="#"> Link 1 </a>
    </div>
    <div class="d-flex flex1 justify-content-end" id="div3">
        <a class="btn btn-lg btn-info" href="#"> Link 2 </a>
        <a class="btn btn-lg btn-info" href="#"> Link 3 </a>
    </div>
</div>

dead center using flexbox nesting

---

Another way is to use absolute position:

<div class="text-center mt-2 d-flex justify-content-center" id="div1">
    <div class="d-flex" id="div2">
        <a class="btn btn-lg btn-success" href="#"> Link 1 </a>
    </div>
    <div class="ms-auto position-absolute end-0" id="div3">
        <a class="btn btn-lg btn-info" href="#"> Link 2 </a>
        <a class="btn btn-lg btn-info" href="#"> Link 3 </a>
    </div>
</div>

dead center using absolute position

Read more: aligning flexbox items is explained here

CodePudding user response：

This solution should help you:

• div2 is in the center of the row
• div3 is at the end of the row

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-end" id="div1">         
        <div  id="div2" class="position-absolute" style="left:50%;width:100px;margin-left:-50px">
            <a class="btn btn-lg btn-success" href="#"> Link 1 </a>
        </div>
        <div  id="div3">
            <a class="btn btn-lg btn-info" href="#"> Link 2 </a>
            <a class="btn btn-lg btn-info" href="#"> Link 3 </a>
        </div>
    </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>