bootstrap 5 space-between misaligned

Question

I have some HTML/CSS where I am trying to make use of Bootstrap 5.2 and justify-content-between to push 2 buttons out to the edges of the container.

<div class="container">
    <div class="row">
        <div class="col-12">
            <ul class="d-flex justify-content-center align-items-center bg-grey">
                <li>Test</li>
            </ul>
        </div>
        <div class="col-12">
            <div class="row justify-content-between">
                <div class="col-2 text-start">
                    <button class="btn btn-primary btn-lg">LEFT</button>    
                </div>
                <div class="col-2 text-end">
                    <button class="btn btn-primary btn-lg">RIGHT</button>
                </div>
            </div>
        </div>
    </div>
</div>

This is how I want it to look - with the LEFT and RIGHT buttons aligned to the edges.

It's fine until the viewport reaches anything under 768px wide (sm or xs), at which point the RIGHT button sticks out.

I can tweak the margin at the relevant responsive break points but it seems like I've got something wrong and shouldn't have to do that.

Is there a correct / better way to achieve this?

Answer 1

With your second attempt, you had rows inside of rows. The rows need to be direct children of the container.

I'd probably just use some explicit flex boxes here if you don't need the column collapsing provided by Bootstrap grids:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-12">
          <div class="d-flex flex-column">
            <ul style='background:grey' class="d-flex justify-content-center align-items-center bg-grey">
              <li>Test</li>
            </ul> 
          </div>
          <div class="d-flex justify-content-between">
            <button class="btn btn-primary btn-lg">LEFT</button> 
            <button class="btn btn-primary btn-lg">RIGHT</button>
          </div>
        </div>
    </div>
</div>

A flex-box column to stack them, then a flex-box row for the buttons. The current .container element isn't really necessary, but it maintains the padding you had.

Answer 2

You can try this :

<div class="container">
  <div class="row">
    <div class="col-12">
      <ul class="d-flex justify-content-center align-items-center bg-dark">
        <li>Test</li>
      </ul>
    </div>
    <div class="col-12">
      <div class="row justify-content-between">
        <div class="col text-start">
          <button class="btn btn-primary btn-lg">LEFT</button>
        </div>
        <div class="col text-end">
          <button class="btn btn-primary btn-lg">RIGHT</button>
        </div>
      </div>
    </div>
  </div>
</div>