Positioning Bootstrap table in the middle of the screen

I need help figuring out how to keep my bootstrap table centered in the middle of the page, instead of adjusting based on the tab selected within a bootstrap nav tab. Currently, it centers around the active tab, but I want it to stay in the middle no matter which tab is clicked. Any suggestions on how to achieve this?

https://i.sstatic.net/Idnxl.png https://i.sstatic.net/bXIpd.png

<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"&rt; Test1</td>
              </tr>
              <tr>
                <th scope="row" id="quality">Placeholder</th>
                <td id="quality_value"&rt; 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"&rt; No </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №1

Make sure to use the col-6 class for each table cell, which sets the width to 50%, half of the entire row. Additionally, the myTabContent now has the row justify-content-center class to center the tabs and contents.

UPDATE: To center the tabs, add the col-6 class to the right tab and use the ms-auto class to move the left tab.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac8c5c5ded9ded8cbdaea9f849b8499">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c1ccccd7d0d7d1c2d3e3968d928d90">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bootstrap slider with fading in and out effects

I am attempting to create a bootstrap slider that fades in and out when transitioning between slides, similar to the effect demonstrated in this template.. I am using Visual Studio 2010 with ASP.NET. The issue I'm facing is that when the image change ...

Utilize jQuery to create a login form within a div when triggered by clicking on

I have implemented a jQuery script for login functionality that displays a new div in the center of the page while fading out the rest of the content. It is functioning correctly when I use an anchor tag with the class='login-window' and select i ...

Creating a website with a seamless image background that fills the entire page

! Is it possible to achieve the same effect using AngularJS? Below is the CSS code: .bg { background: url(holiday-car-rental.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-s ...

Tips for personalizing Bootstrap columns using identical class names?

Is there a way to customize the background color of each individual .col-5 within the same row while using Bootstrap and a custom CSS file? Changing the styles for one column seems to affect all columns with the same class name. Edit: I'm looking f ...

Implementing sliders for interactive functionality with an HTML table

I need to implement sorting and sliding features on an HTML table using jQuery. Sorting has already been achieved by utilizing the DataTable.js jQuery library. The challenge now is to incorporate a slider into the table, with all subject columns being scro ...

Is there a way to display (PHP for loop variables) within an HTML table using echo?

for ($q = 1 ; $q < 7 ; $q++ ) { echo $q ; echo $row; } While the above code functions properly, I am interested in echoing two rows as shown in the image below: https://i.stack.imgur.com/7KmUY.jpg I prefer not to use another for loop. Is there a way t ...

Keep some table columns locked in place on your webpage while others are located off-screen, requiring a scroll to access

I have a question regarding an HTML table. There is a windows application that features a vertical scrollable table where some columns are fixed on the page while others remain outside the page. Here is an example: The black border represents the responsi ...

Using d3.js to dynamically change the color of svg elements based on their data values

I was searching for a way to dynamically color SVG rectangles based on values from a dataset. If I were to create rectangles for each data entry, how could I adjust the rectangle's color according to the data value? Here is what I currently have: // ...

The height of a div element does not automatically default to 100% in Next.js

I'm encountering an issue with styling pages in next.js. My goal is to create full-height pages. Although I've successfully set the height attribute in the body and html tags to achieve full height (verified in dev tools), I'm struggling to ...

What is the best way to send an HTML form variable to a Perl script using AJAX?

My goal is to pass the HTML variable from the list menu to the Perl script using POST. However, when I try to do this, the jQuery ajax() function executes the Perl script without including the value obtained from document.getElementById. Below is the sni ...

The active class in Bootstrap 4 Scroll Spy failed to update

My HTML code: <body data-spy="scroll" data-target=".dmu-top-nav" data-offset="50"> <header> <nav class="navbar navbar-toggleable-sm navbar-expand-md dmu-top-nav fixed-top" role="navigation"> <div class="container-fluid"> &l ...

Placing emphasis on an object that appears following a period of waiting

I'm currently working on enhancing the accessibility of a slider that will be featured on my website. The goal is to create an effect where, after clicking (or pressing enter) on the first slide, the focus shifts to the second slide element, allowing ...

Bootstraping Twitter with PHP session starting has become a standard practice in modern

Currently, I am developing a website using PHP and Twitter Bootstrap. The issue I'm encountering is that if I include session_start() first, the layout gets messed up because Bootstrap needs <!DOCTYPE html> to come before it. On the other hand ...

Creating a customized design for a q-popup-edit

As I navigate through using Quasar in Vue, I stumbled upon a q-popup-edit that allows me to gather input from the user. Despite my attempts at researching via Google and reading documentation, I have hit a roadblock when it comes to customizing the style o ...

Experienced an unexpected setback with the absence of the right-click capability on a Javascript-powered hyperlink, specialized for

I am facing an issue with a hyperlink on my website. This particular hyperlink submits a hidden form using the POST method to redirect users to another site. However, when someone right-clicks on this hyperlink and tries to open it in a new tab, they are o ...

"Tricks to prompt the browser to refresh and load up-to-date content

Currently experiencing issues with my web browser (both on my laptop and smartphone). I am working on a website page (HTML, javascript) and have observed that my browser keeps retrieving cached information instead of loading the page each time, preventing ...

Obtain the Week Input's Value

Is there a way to store the value of a week input in a variable and then display it in a span? I attempted the following code: <input type="week" name="week" id="week-selector"> <span id="kalenderwoche"> ...

Tips for implementing personalized/modified CSS on Vuetify components?

Let's say I've included the v-text-field component from Vuetify in my Vue component as shown below: <v-text-field v-model="email" name="email" type="email" color="#90C143" label="Email"> Upon inspecting the element, it generates regular H ...

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exac ...

Achieving vertical alignment and stretching of subchild within a flexbox element

I am in the process of creating a mobile navigation menu using Flexbox. It will be a vertical menu that occupies 100% of the available height, with the navigation items evenly spaced and taking up the entire height. The structure I am using is ul>li> ...