-1

Helo everyone!
Can not figure out how to align vertically items in Bootstrap 5 on a specific example. The row is separated into two columns ( col-md-6 ) and I want to position two items in only the first column one in the middle of the flexbox and the other in the end. I can't separate the two items, the only thing that works is to move them together. Any thoughts?

<div class="row min-vh-100" id="about">
  <div class="col-md-6 bg-red d-flex flex-column justify-content-center">
    <div class="text-center">
      <h2>ABOUT</h2>
    </div> 

      <div class="d-flex flex-column justify-content-end">
      <div class="text-center">
        <ul>
          <li><a href="#about">about me /</a></li>
          <li><a href="#projects">projects /</a></li>
          <li><a href="#contact">contact</a></li>
        </ul>
      </div>
      </div>
     
  </div>
  <div class="col-md-6">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero expedita 
    ea assumenda aperiam? Nam atque dolorum aut quo, 
    magni voluptatum aspernatur consequatur doloremque excepturi, reprehenderit,
    vitae eius similique doloribus? Quae?
  </div>
</div>
Harry 2gks
  • 15
  • 2

1 Answers1

0

Use justify-content-between to spread the elements across the start, middle and end section of your column. To push the heading in the middle and the menu to the bottom, just add an empty <div> as first element in your column.

You can find pretty good pictured tutorial on flex-items here.

<div class="row min-vh-100" id="about">
  <div class="col-md-6 bg-red d-flex flex-column justify-content-between">
    <div class="w-100"> <!-- just an empty box with 100% width --></div>

    <div class="text-center">
      <h2>ABOUT</h2>
    </div> 

      <div class="d-flex flex-column justify-content-end">
      <div class="text-center">
        <ul>
          <li><a href="#about">about me /</a></li>
          <li><a href="#projects">projects /</a></li>
          <li><a href="#contact">contact</a></li>
        </ul>
      </div>
      </div>
     
  </div>
  <div class="col-md-6">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero expedita 
    ea assumenda aperiam? Nam atque dolorum aut quo, 
    magni voluptatum aspernatur consequatur doloremque excepturi, reprehenderit,
    vitae eius similique doloribus? Quae?
  </div>
</div>
EduDev
  • 254
  • 2
  • 7