display: flex;
: This turns the container (.demo-container
) into a flex container, enabling flexbox behavior for the buttons inside it.justify-content: space-between;
: This will place the buttons in the container with equal space between them, pushing the first button to the left and the last button to the right. It ensures that the buttons are spaced out evenly.
<div class="demo-container">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
.demo-container {
display: flex;
flex-direction: row;
justify-content: space-between
}