Replacing content with Nav pills

Question 1: How does the Nav pills works in terms of switching content and both content appearing on the same area? currently when I click to switch, the second content will appear below where the other was at! Question 2: How do I make the active content appear on page reload? currently, after the reload I have to click on the other nav pill button for the content to start appearing!

Below in my Nav Pill code:

  <div class="card card-body blur shadow-blur mb-4">
    <div class="row gx-4">
      <div class="col-md-6 my-sm-auto">
        <ul class="nav nav-pills nav-fill p-1" role="tablist">
          <li class="nav-item">
            <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#message" role="tab" aria-controls="preview" aria-selected="true">
            <i class="ni ni-badge text-sm me-2"></i> My Profile
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#setting" role="tab" aria-controls="code" aria-selected="false">
              <i class="ni ni-laptop text-sm me-2"></i> Dashboard
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

Below in my Nav Pill content code:

  <div class="row">
      <div class="col-12">
        <!-- Nav Pill Content -->
        <div class="tab fade" id="message" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <p>Messages</p>
        </div>
        <!-- Nav Pill Content -->
        <div class="tab fade" id="setting" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <p>Settings</p>
        </div>
      </div>
  </div>

creativetimofficial / soft-ui-dashboard

Replacing content with Nav pills #48