Button not justifying in react

Question

here is my code image where i am stuck

what i want is button to be display as justify

I am able to get button as justifying as shown in following image but this is not working in my react code

my code which is not working as expected

 <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

.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;
}

Hi Navin. Are you able to replicate the problem using as little code as possible inside a jsfiddle or the StackOverflow code inserter? It's much easier helping you find the problem if we have a working example to play with. :) — Frits, Aug 30 '18 at 13:31
i have written same code as in second image, but what i am getting result as first image — Navin Gelot, Aug 30 '18 at 13:31
https://stackoverflow.com/questions/49536/how-do-i-really-justify-a-horizontal-menu-in-htmlcss here is the problem from where i tried but it is not working with react :) you can try out @Frits — Navin Gelot, Aug 30 '18 at 13:36
Are you u sing bootstrap by any chance? if so, which version? there are classes in bootstrap that you can use for this without creating your own. — c-chavez, Aug 30 '18 at 14:14

Sepehr · Answer 1 · 2018-08-31T08:40:12.390

Try this: HTML:

<div class="buttons">
  <div class="first-row">
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
  </div>
  <div class="second-row">
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
  </div>
 </div>

CSS:

.first-row {
  display:grid;
  grid-template-columns:repeat(4, auto);
  justify-content: space-between;
}
.second-row{
  display:grid;
  grid-template-columns:repeat(5, auto);
  justify-content: space-between;
}

You will find the Codepen here: https://codepen.io/sphr1313/pen/BOpWVg

Sorry for late reply your answer is working but while scaling button should minimize in term of number — Navin Gelot, Sep 03 '18 at 07:02

Button not justifying in react

1 Answers1