Having a bit of trouble with my code image here
I'm trying to make the button display justified
https://i.sstatic.net/uJYyA.png
I managed to justify the button as shown in this image, but it's not working in my React code
https://i.sstatic.net/dsIQt.png
Here's the code that's causing issues:
<div className="hidden-xs buttons col-lg-12 col-md-12">
<button>Kartonnen brillen</button>
<button>Kartonnen brillen</button>
<button>Kartonnen brillen</button>
<button>Kartonnen brillen</button>
<div className="stretch-spacing-buttons"></div>
<button>Kartonnen brillen</button>
<button>Kartonnen brillen</button>
<button>Kartonnen brillen</button>
<button>Kartonnen brillen</button>
<button>Kartonnen brillen</button>
<div className="stretch-spacing-buttons"></div>
</div>
CSS styling:
.buttons {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.stretch-spacing-buttons {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}