Bootstrap

Justify space evenly between buttons

Explanation:

  1. display: flex; makes the container (.demo-container) a flex container, allowing its children (the buttons) to be laid out according to flexbox rules.
  2. justify-content: space-evenly; distributes the space evenly between the buttons, so there is an equal amount of space between each button, as well as before the first button and after the last button.
  3. gap: 10px; is optional and adds space between the buttons to prevent them from being too close together. You can adjust the value as needed.

HTML

<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>

CSS

.demo-container {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: space-evenly
}