I have a container (100% width) with 3 buttons inside. I want to keep them evenly spaced with a small margin between each button.
My attempt with Bootstrap and display flex with space-between didn't give me the desired result.
https://i.sstatic.net/9eWqc.png
Here is the code I used:
.container {
display: flex;
flex-direction: row;
text-align: center;
font-weight: normal;
font-size: 16px;
line-height: 19px;
align-items: center;
justify-content: space-between;
}
.child-element {
background: #FFFFFF;
box-sizing: border-box;
width: 100px;
height: 60px;
border: solid 1px #C4C4C4;
}
.child-element .selected {
background: #FFED00;
}<div class="container">
<button class="child-element" data-option="1"><span style="color:#000">First</span></button>
<button class="child-element" data-option="2"><span style="color:#000">Second</span></button>
<button class="child-element" data-option="3"><span style="color:#000">Third</span></button>
</div>This is the arrangement I would like to achieve:
https://i.sstatic.net/8UgXA.png
What changes can I make to achieve this layout? Is there a better alternative to using margin-left and margin-right?