Currently, I am working on creating a Bootstrap Modal that includes tabs for easy navigation within the modal. However, I have encountered an issue where the tabs are not aligned properly as shown in the image linked below:
This is the code snippet I am using to build the modal in JavaScript:
BootstrapDialog.show({
title: "Vouchers Details",
closable: false,
message: `
<!-- Tab creation -->
<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>
<!-- Tab content -->
<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 assistance with aligning these tabs correctly. I have tried using various bootstrap classes and custom CSS/HTML but have been unsuccessful in resolving this alignment issue.