例えば下記のようなコードで jQuery の toggle や fade を使うと、正常に動作しません。
(slideUp、slideDown、show、hide 等も同様です)

<!-- 正常に動作しない例 -->
<ul class="menu d-flex">
  <li>ハンバーガー</li>
  <li>ポテト</li>
  <li>ナゲット</li>
</ul>

<button class="btn-toggle">トグル</button>

<button class="btn-fade">フェード</button>

.d-flex {
  display: flex !important;
}

$(() => {
  // トグル
  $('.btn-toggle').on('click', () => {
    $('.menu').toggle();
  });

  // フェード
  $('.btn-fade').on('click', () => {
    $('.menu').fadeToggle();
  });
});

この原因は表示切替対象の .menu の要素に、css で display が !important で指定されていることです。
d-flex は bootstrap にも用意されているクラスで、このような失敗をよく見かけます。

解決策としておススメなのが表示切替の要素は display を未指定となるマークアップです。

今回の例では、.menu を .d-flex の外に出します。

<div class="menu">
  <ul class="d-flex">
    <li>ハンバーガー</li>
    <li>ポテト</li>
    <li>ナゲット</li>
  </ul>
</div>

上記コードはシンプルなのでタグと階層が増えるデメリットが目につきますが、
.menu のタグに他の属性を付ける場合や、.d-flex のクラスが長くなる場合などは
このようにタグを分けることでコードの可読性が上がる場合もあります。