1

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>
Tbko
  • 13
  • 5

2 Answers2

0

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/bootstrap@5.1.3/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>
D A
  • 1,724
  • 1
  • 8
  • 19
  • I've tried it and it's very close to what I wanted but the "div2" isn't in the center of the page, it's between two divs, the right one being bigger than the left one, which makes "div2" being slightly oriented to the left , I'll edit my question to specify that, my fault. – Tbko Nov 04 '21 at 10:46
  • Now you have the updated version. – D A Nov 04 '21 at 11:08
0

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • The first option works perfectly for me! I tried the second one too but the "div3" appeared above "div2", I didn't figure out why but I'll check the last link you posted to understand it better. Thank you! – Tbko Nov 04 '21 at 11:39