Bootstrap 5 Modal with Multiple Tabs

This code creates a Bootstrap 5 Modal with Multiple Tabs for organized content display. It allows users to switch between sections easily. Moreover, it keeps related information grouped within a single popup window. As a result, navigation becomes smoother and more efficient. This approach is helpful for saving space and improving user experience.

How to Create Bootstrap 5 Modal With Multiple Tabs

First of all, load the following assets into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>

Create the HTML structure as follows:

<!-- Bootstrap 5 Modal with Tabs -->
<div class="modal fade" id="multiTabModal" tabindex="-1" aria-labelledby="multiTabModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      
      <!-- Modal Header -->
      <div class="modal-header">
        <h5 class="modal-title" id="multiTabModalLabel">Modal with Tabs</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      
      <!-- Modal Body -->
      <div class="modal-body">
        <!-- Nav Tabs -->
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1" type="button" role="tab" aria-controls="tab1" aria-selected="true">
              Tab 1
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2" type="button" role="tab" aria-controls="tab2" aria-selected="false">
              Tab 2
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab3-tab" data-bs-toggle="tab" data-bs-target="#tab3" type="button" role="tab" aria-controls="tab3" aria-selected="false">
              Tab 3
            </button>
          </li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content mt-3" id="myTabContent">
          <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
            <p>Content for Tab 1 goes here.</p>
          </div>
          <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
            <p>Content for Tab 2 goes here.</p>
          </div>
          <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
            <p>Content for Tab 3 goes here.</p>
          </div>
        </div>
      </div>
      
      <!-- Modal Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Trigger Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#multiTabModal">
  Open Modal with Tabs
</button>

Load the following scripts before closing the body tag:

 <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/js/bootstrap.min.js'></script>

That’s all! hopefully, you have successfully created modal with multiple tabs inside it. If you have any questions or suggestions, feel free to comment below.