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?
With your second attempt, you had rows inside of rows. The row
s 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.