Create a div with 4 responsive buttons with text and logos bootstrap 5

Question

I have got a HTML/CSS/Bootstrap 5/JS and Rust/Actix-web webapp. The code

In the index page I have got a navbar and a div with four buttons in the centre (vertical, horizontal). The actual mechanism for resizing the buttons is getting the size of the text above and divide by 4. That's the width of the button. But there are two problems: if the name of the user is small the buttons will be small and that in medium size devices, e.g.: tablets the size of the font is as bigger as in my laptop because it's very hard to exactly configure the @media screen.

As result, I have overflow with in the buttons.

let divElement = document.getElementById("welcome");
let buttons = document.getElementsByClassName('button-group-element')
let buttons_array = Array.from(buttons)
let elemWidth = divElement.offsetWidth / buttons_array.length;
for (i = 0; i < buttons_array.length; i++) {
  if (i != 0) {
    buttons_array[i].style.marginLeft = elemWidth * i + "px"
  }
  buttons_array[i].style.width = elemWidth + "px"
}

html,
body {
 position: relative;
 height: 100%;
 width: 100%;
}

body {
 display: flex;
 position: absolute;
 align-items: center;
 bottom: 40%;
 justify-content: center;
 background-color: #0000;
}

#welcome {
 text-align: center;
 }


.button-group-element {
  text-align: center;
  position: absolute;
  height: 40%;
}

@media screen and (min-width: 707px) {
  .button-group-element {
    font-size: 2em;
  }
}

@media screen and (max-width: 706px) {
  .button-group-element {
    font-size: 1.3em;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<h1 id="welcome">Bienvenido John Doe!</h1>
<div class="button-group">
<button onclick="window.location.href='/add_question'" type="button" class="btn btn-outline-primary button-group-element"><i class="bi bi-plus-circle"></i> <br>Nueva Pregunta</button><button type="button" class="btn btn-outline-primary button-group-element"
  onclick="window.location = '/modify_question'"><i class="bi bi-pen"></i> <br>Modificar Pregunta</button><button type="button" class="btn btn-outline-primary button-group-element" onclick="window.location = '/student_question'"><i class="bi bi-mortarboard"></i> <br>Preguntas de los Alumnos</button>
<button
  type="button" class="btn btn-outline-primary button-group-element" onclick="window.location = '/statics'"><i class="bi bi-bar-chart"></i> <br>Estadistica</button> </div>

Answer 1

Per your comment indicating you'd like to stack the elements on smaller devices to avoid the overflow problem, this should be what you're looking for.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<h1 id="welcome">Bienvenido John Doe!</h1>
<!-- You're already pulling in Bootstrap. By applying the `row` class, 
you're able to leverage their grid classes -->
<div class="button-group row">
  <!-- Adding the `col-md-3` class will make the element take 3/12 (1/4) of 
  the parent's width. Adding the `md` piece makes this only apply for
  medium screen sizes and larger. When going to a smaller device, by default
  each element takes the full parent width
 -->
  <button type="button" class="btn btn-outline-primary button-group-element col-md-3">
    <i class="bi bi-plus-circle"></i><br>
    Nueva Pregunta
  </button>
  <button type="button" class="btn btn-outline-primary button-group-element col-md-3">
    <i class="bi bi-pen"></i><br>
    Modificar Pregunta
  </button>
  <button type="button" class="btn btn-outline-primary button-group-element col-md-3">
    <i class="bi bi-mortarboard"></i><br>
    Preguntas de los Alumnos
  </button>
  <button type="button" class="btn btn-outline-primary button-group-element col-md-3">
    <i class="bi bi-bar-chart"></i><br>
    Estadistica
  </button>
</div>

I also removed all of the provided CSS and JS code to get this to work.