Centering bootstrap table in center of page

user_18579937 0
Viewed 38

I am working on placing a bootstrap table in the center as the content of a boostrap nav tab. It is centered for the first tab, but when I click on the second tab, it centers around that tab. How do I make it so that it just centers in the middle of the page and doesn't adjust for each tab?

enter image description here enter image description here

<div class="row">
  <div class="row justify-content-center">
    <div class="nav-wrapper col-7" id="profile-wrapper">
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" id="profileItem" role="presentation">
          <button class="nav-link active" id="basicInfo-tab" data-bs-toggle="tab" data-bs-target="#basicInfo" type="button" role="tab" aria-controls="basicInfo" aria-selected="true">Basic Info</button>
        </li>
        <li class="nav-item" id="profileItem" role="presentation">
          <button class="nav-link" id="systemUse-tab" data-bs-toggle="tab" data-bs-target="#systemUse" type="button" role="tab" aria-controls="systemUse" aria-selected="false">System use</button>
        </li>
      </ul>
      <br>
    </div>
  </div>
  <div class="tab-content ml-1" id="myTabContent">
    <div class="tab-pane show active" id="basicInfo" role="tabpanel" aria-labelledby="basicInfo-tab">
      <div class="row justify-content-center">
        <div class="col-7">
          <table class="table table-bordered vertical-align" id="profile_table">
            <tbody>
              <tr>
                <th scope="row" id="quality">Placeholder</th>
                <td id="quality_value"> Test1</td>
              </tr>
              <tr>
                <th scope="row" id="quality">Placeholder</th>
                <td id="quality_value"> Test2</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="tab-pane show" id="systemUse" role="tabpanel" aria-labelledby="systemUse-tab">
      <div class="row justify-content-center">
        <div class="col-7">
          <table class="table table-bordered vertical-align" id="profile_table">
            <tbody>
              <tr>
                <th scope="row" id="quality">First Time User</th>
                <td id="quality_value"> No </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
bootstrap-5 css html
1 Answers

You need to use col-6 class for each table cell, it is equal width: 50% half of the entire row. Also, I added row justify-content-center to myTabContent to keep tabs and contents centered.

UPDATED. To center the tabs , I added col-6 to the right tab and moved left tab using the ms-auto class.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="row">
  <div class="row justify-content-center">
    <div class="nav-wrapper col-7" id="profile-wrapper">
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item ms-auto" id="profileItem" role="presentation">
          <button class="nav-link active" id="basicInfo-tab" data-bs-toggle="tab" data-bs-target="#basicInfo" type="button" role="tab" aria-controls="basicInfo" aria-selected="true">
                Basic Info
              </button>
        </li>
        <li class="nav-item col-6" id="profileItem" role="presentation">
          <button class="nav-link" id="systemUse-tab" data-bs-toggle="tab" data-bs-target="#systemUse" type="button" role="tab" aria-controls="systemUse" aria-selected="false">
                System use
              </button>
        </li>
      </ul>
      <br />
    </div>
  </div>
  <div class="tab-content ml-1 row justify-content-center" id="myTabContent">
    <div class="tab-pane show active" id="basicInfo" role="tabpanel" aria-labelledby="basicInfo-tab">
      <div class="row justify-content-center">
        <div class="col-7">
          <table class="table table-bordered vertical-align" id="profile_table">
            <tbody>
              <tr>
                <th scope="row" id="quality" class="col-6">Placeholder</th>
                <td id="quality_value" class="col-6">Test1</td>
              </tr>
              <tr>
                <th scope="row" id="quality">Placeholder</th>
                <td id="quality_value">Test2</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="tab-pane show" id="systemUse" role="tabpanel" aria-labelledby="systemUse-tab">
      <div class="row justify-content-center">
        <div class="col-7">
          <table class="table table-bordered vertical-align" id="profile_table">
            <tbody>
              <tr>
                <th scope="row" id="quality" class="col-6">First Time User</th>
                <td id="quality_value" class="col-6">No</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

user_155451160
Related