Tabs not aligned in Bootstrap Modal

I´m building a Bootstrap Modal and I want to put some tabs inside this Modal to be able to navigate inside him.

What is happenings is that the tabs displayed are not aligned the proper way like in the following image:

enter image description here

I am building this modal in the Javascript with this code:

BootstrapDialog.show({
          title: "Vouchers Details",
          closable: false,
          message: `
             <!-- Criação das tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu1" role="tab" aria-controls="menu1" aria-selected="false">Menu 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu2" role="tab" aria-controls="menu2" aria-selected="false">Menu 2</a>
      </li>
    </ul>

    <!-- Conteúdo das tabs -->
    <div class="tab-content mt-3">
      <div id="home" class="tab-pane fade show active" role="tabpanel" aria-labelledby="home-tab">
        <h3>HOME</h3>
        <p>Some content.</p>
      </div>
      <div id="menu1" class="tab-pane fade" role="tabpanel" aria-labelledby="menu1-tab">
        <h3>Menu 1</h3>
        <p>Some content in menu 1.</p>
      </div>
      <div id="menu2" class="tab-pane fade" role="tabpanel" aria-labelledby="menu2-tab">
        <h3>Menu 2</h3>
        <p>Some content in menu 2.</p>
      </div>
    </div>
          `,
          buttons: [
            {
              label: "Dismiss",
              action: function (dialog) {
                dialog.close();
              },
            },
          ],
        });

I need some help to align this tabs.

I try to use some bootstrap classes and some css and html customization, but it did not solve this problem.