/* Add 
d-none d-sm-inline-block 
d-none d-md-inline-block 
to buttons you want to hide on phones and show only on larger screens.

*/
<nav class="navbar navbar-expand-sm">
  <button type="button" class="btn btn-primary btn-sm" id="btnClear">
    <i class="fas fa-trash d-none d-md-inline-block " aria-hidden="true"></i> Clear
  </button>

  <button type="button" class="btn btn-warning btn-sm d-none d-md-inline-block " id="btnMinMax">
    <i class="fa fa-trash" aria-hidden="true"></i> MinMax
  </button>

  <button type="button" class="btn btn-primary btn-sm" id="btnYearly">
    <i class="fa fa-trash" aria-hidden="true"></i> Yearly
  </button>

  <button type="button" class="btn btn-primary btn-sm" id="btnWeekly">
    <i class="fa fa-trash" aria-hidden="true"></i> Weekly
  </button>

  <button type="button" class="btn btn-sm btn-success" id="btnCalc">
    <i class="fa fa-calculator" aria-hidden="true"></i> Calc
  </button>

  <button type="button" class="btn btn-sm btn-success" id="btnCurrent">
    <i class="fa fa-calculator" aria-hidden="true"></i> Current
  </button>

  <button type="button" class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#myModal">
    Open Modal
  </button>

  <button type="button" class="btn btn-warning btn-sm d-none d-md-inline-block " id="btnRefresh">
    <i class="fa-solid fa-arrows-rotate"></i> NewRefresh
  </button>
</nav>