طراحی منو با استفاده از بوت استرپ

سلام دوستان. خسته نباشید. می‌خواستم با بوت استرپ یک nav ایجاد کنم که هر وقت عناصر li جا نشدن، دکمه‌ی منو بیاد که وقتی روش کلیک شد، عناصر به صورت collapse ظاهر شن. ممنون میشم راهنمایی کنید.

سلام ابتدا یک تگ دکمه ایجاد کنید و سپس مربوطش کنید به یک دیو که قراره با زدن این دکمه collapse یا اصطلاحا جمع بشه.

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">لیست منو 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">لیست منو 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">لیست منو 3</a>
      </li>
    </ul>
  </div>

 حالا با مشخص کردن یکی از کلاس های navbar-expand-lg یا navbar-expand-md میتونید تعیین کنید که منوی شما در چه صفحه نمایشی به صورت collapse ظاهر بشه.

<nav class="navbar navbar-expand-lg">
....
</nav>