Bootstrapを使用したモーダル（Modal）機能

質問を押したらその場で答えのフォームが出てくる！ってのがしたくてmodal使ってみた〜〜！！💟
参考記事
https://getbootstrap.jp/docs/4.5/components/modal/
https://zenn.dev/miki_do/articles/2830d1975bfca6

実装結果

<div class="container-fluid faq-wrapper">
<h2 class="text-center pb-3">よくある質問</h2>
<div class="row">

   <div class="col-6">
    <!-- Button trigger modal -->
    <div class="text-dark border p-3 mt-2" data-toggle="modal" data-target="#exampleModalCenter">
       質問１
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalCenterTitle">質問１</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
           質問１の答え
          </div>
        </div>
      </div>
    </div>
  </div>

   <div class="col-6">
    <!-- Button trigger modal -->
    <div class="text-dark border p-3 mt-2" data-toggle="modal" data-target="#exampleModalCenter2">
    質問２
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalCenterTitle">質問２</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            質問２の答え
          </div>
          </div>
        </div>
      </div>
    </div>

   <div class="col-6">
    <!-- Button trigger modal -->
    <div class="text-dark border p-3 mt-2" data-toggle="modal" data-target="#exampleModalCenter3">
      質問３
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter3" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalCenterTitle"> 質問３</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            質問３の答え
        </div>
      </div>
    </div>
  </div>
</div>

   <div class="col-6">
    <!-- Button trigger modal -->
    <div class="text-dark border p-3 mt-2" data-toggle="modal" data-target="#exampleModalCenter4">
      質問４
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter4" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalCenterTitle">質問４</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            質問４の答え
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
</div>

増やしたい分下記足していく！！

   <div class="col-6">
    <!-- Button trigger modal -->
    <div class="text-dark border p-3 mt-2" data-toggle="modal" data-target="#exampleModalCenter3">
      質問A
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter3" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalCenterTitle"> 質問A</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            質問Aの答え
        </div>
      </div>
    </div>
  </div>
</div>