buttons too high in row

[aragon5956]

hello,
i would like to know how to reduce high buttons, because, when i write a list of buttons in a row, the buttons in are too high, cause to text in the button require to many text

could you help me ?

[GeorgiosDrivas]

Hello! As of my knowledge, there is not a standard solution to this, because the text in the first button is bigger than the others.
What you can do is to adjust the font size.

Something like:
button { height: 40px; /* or whatever looks best */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

Or to reduce the line height like this:

button { line-height: 1.2; padding: 0.4rem 0.8rem; }

In any case, make sure to center the content in a flex or grid container like this:

`
parent-element{
display: flex;
gap: 10px;
}

button {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
`

[aragon5956]

[ENG]this tag doesn't change anything :
<div class="row justify-content-center d-flex flex-column flex-md-row"> <div class="col-12 text-center d-flex flex-column flex-md-row"> <a class="btn btn-primary height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap" href="{{ path('app_register') }}">formulaire d'enregistrement</a> <a class="btn btn-primary w-100 mb-4 p-2" href="{{ path('app_login') }}">Login</a> <a class="btn btn-primary w-100 mb-4 p-2" href="{{ path('app_piratages_il_se_font_fait_guaulle') }}">Tentatives d'intrusions</a> <a class="btn btn-primary w-100 mb-4 p-2" href="{{ path('app_cours') }}">Cours</a> <a class="btn btn-primary w-100 mb-4 p-2" href="{{ path('app_actualites') }}">Actualités</a> <a class="btn btn-primary w-100 mb-4 p-2" href="{{ path('app_apropros') }}"> À propos </a> </div> </div> </div>

and the second tag doesn't too: line-height: 1.2; padding: 0.4rem 0.8rem;

[GeorgiosDrivas]

 <style>
  .first-btn {
    height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
<div class="row justify-content-center d-flex flex-column flex-md-row">
  <div
    class="col-12 text-center d-flex flex-column flex-md-row justify-content-center align-items-center"
  >
    <a
      class="first-btn btn btn-primary height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
      href="{{ path('app_register') }}"
      >formulaire d'enregistrement</a
    >
    <a class="btn btn-primary w-100 p-2" href="{{ path('app_login') }}"
      >Login</a
    >
    <a
      class="btn btn-primary w-100 p-2"
      href="{{ path('app_piratages_il_se_font_fait_guaulle') }}"
      >Tentatives d'intrusions</a
    >
    <a class="btn btn-primary w-100 p-2" href="{{ path('app_cours') }}"
      >Cours</a
    >
    <a class="btn btn-primary w-100 p-2" href="{{ path('app_actualites') }}"
      >Actualités</a
    >
    <a class="btn btn-primary w-100 p-2" href="{{  path('app_apropros') }}">
      À propos
    </a>
  </div>
</div>  

I tried customized the first button like this.

[aragon5956]

[ENG]I had to change:" formulaire d'enregistrement par s'enregistrer"
[FRA]il a fallut que je change :" formulaire d'enregistrement par s'enregistrer"
[DE]Ich mußte ändern: " formulaire d'enregistrement par s'enregistrer"
[ITA]ho dovuto cambiare:"formulaire d'enregistrement par s'enregistrer"

[GeorgiosDrivas]

So it's solved?

[aragon5956]

oui ! ne cherchons pas plus loin !