When clicking on a different tab, the Bootstrap tab will shift to the left, outlining the new selection

While working with Bootstrap, I created a small footer with a tab. However, whenever I click on the second value, the entire div shifts to the left. How can I keep it in place?

Below is my code along with two images depicting how the first tab aligns correctly and how the second one moves to the left.

<footer class="navbar navbar-dark bg-dark text-light">
  <div class="container mt-5">
      <div class="row">
          <div class="col-6">
              <span class="navbar-brand m-2 h1 text-white">My Blog</span>
          </div>
          <div class="col-6">
              <ul class="nav nav-tabs"  id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                      <a class="nav-link active" aria-current="page" href="#" id="about-tab" data-bs-toggle="tab" data-bs-target="#pills-about">About Me</a>
                  </li>
                  <li class="nav-item" role="presentation">
                      <a class="nav-link" aria-current="page" href="#" id="contact-tab" data-bs-toggle="tab" data-bs-target="#pills-contact">Contact</a>
                  </li>
              </ul>
              <div class="tab-content" id="pills-tabContent">
                  <div class="tab-pane fade show active text-white" id="pills-about" role="tabpanel" aria-labelledby="pills-about-tab" tabindex="0"><p>I am an IT professional, tech enthusiast, and coach at Bit Academy. Through this background, I strive to educate as many people as possible about technology.</p></div>
                  <div class="tab-pane fade text-white" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0"><p>Email: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e38a8d858ca3818a97ce82808287868e9acd8d8f">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f59c9b939ab5979c81d89496949190988cdb9b99">[email protected]</a></a></p><p>Address: Koningin Wilhelminaplein 1, Amsterdam</p></div>
              </div>
          </div>
      </div>
  </div>
</footer>

Screenshot of Tab 1 Screenshot of Tab 2

I have experimented with various positioning options in Bootstrap, but so far, I have been unable to determine why it instantly shifts to the left when switching tabs.

htmlcssbootstrap-5

Answer №1

To fix the issue in the footer, simply delete the word 'navbar' from the class attribute. See the functional demo below:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9c9bca7baa7ba">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2808d8d969196908392a2d7ccd1ccd1">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<footer class="py-5 bg-dark text-light">
  <div class="container">
      <div class="row">
          <div class="col-6">
              <span class="m-2 h1 text-white">Mijn Blog</span>
          </div>
          <div class="col-6">
              <ul class="nav nav-tabs"  id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                      <a class="nav-link active" aria-current="page" href="#" id="about-tab" data-bs-toggle="tab" data-bs-target="#pills-about">About Me</a>
                  </li>
                  <li class="nav-item" role="presentation">
                      <a class="nav-link" aria-current="page" href="#" id="contact-tab" data-bs-toggle="tab" data-bs-target="#pills-contact">Contact</a>
                  </li>
              </ul>
              <div class="tab-content" id="pills-tabContent">
                  <div class="tab-pane fade show active text-white" id="pills-about" role="tabpanel" aria-labelledby="pills-about-tab" tabindex="0"><p>Ik ben IT-er, tech enthousiast en coach bij Bit Academy. Vanuit deze achtergrond probeer ik zo veel mogelijk mensen iets nieuws te leren over tech.</p></div>
                  <div class="tab-pane fade text-white" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0"><p>E-mail: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb92995f4f52555d52"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d54531055535e415357"></a>[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d54553e5d57555647503950555753525f47406359565a52551749555d52">[email protected]</a></a></p><p>Adres: Koningin Wilhelminaplein 1, Amsterdam</p></div>
              </div>
          </div>
      </div>
  </div>
</footer>

Answer №2

By adding the "navbar" class to the footer, it gained specific properties that caused a certain effect. However, by removing the "navbar" class from the footer, I was able to successfully resolve the issue.

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

Display a div with a link button when hovering over an image

Currently, I'm attempting to display a link button within a div that will redirect the user to a specified link upon clicking. Unfortunately, my current implementation is not functioning as expected. I have provided the code below for reference - plea ...

c#javascriptjqueryhtmlcss

"Utilize jQuery to target and highlight specific HTML elements when redirecting

I am working with a list of elements and I want to be able to redirect the focus to a specific element using a URL. <div id="20"></div> <div id="21"></div> <div id="22"></div> // example url http://localhost: ...

htmlcss

Tips for modifying the "width" of a style within an HTML template implemented in a NodeJs express application

Currently, I am facing a challenge in dynamically adjusting the width value for a <div> element serving as a coloured bar within an HTML template used for PDF generation. While I can successfully set other values using something like {{my_value}}, ap ...

htmlcssnode.jsexpress

Unique border-bottom width measurements available

Seeking assistance with a design challenge, further details are available in the screenshot I've provided. I am attempting to apply a unique border bottom style to or text, with specific width specifications that do not span the entire word length. ...

htmlcss

What makes the transparent border colors on <tr> appear too dark?

For instance, take a look at this code: http://jsfiddle.net/WaJy7/ In my attempt to apply a semi-transparent border to every <tr> element, I've encountered an issue where the color of the border appears darker than intended for all rows except ...

htmlcss

Tips for detaching jQuery from HTML

I have attempted multiple combinations without success. Below is my current code (all within the HTML document): <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="te ...

jqueryasp.net-mvchtml

Ways to ensure a form label is accessible via keyboard navigation

My HTML5 form collects user information and processes it upon submission. With the help of the jQuery Validation Plugin, input validation is performed. In case of errors, an error-message-container div is displayed at the top of the screen, listing all err ...

jqueryhtmlaccessibility

Shimmering effect on hover for CSS animation

Is there a way to create a CSS-only animation that fades in and out until hovered when displayed in full? I can achieve both effects separately, but I'm struggling to make them work together. The hover element doesn't seem to be functioning prope ...

cssanimationhovercss-animations

One way to eliminate a prefix from a downloaded file path is by trimming the URL. For example, if you have a URL like "http://localhost

As my web app runs on port number, I am looking to download some files in a specific section. However, the download file path is being prefixed with "". <a href={file_path} download={file_name}> <Button variant={"link"}> <b>Dow ...

javascripthtmlreactjsreact-reduxreact-bootstrap

After the page is reloaded, apply a class to the divs by selecting them based on the "data" attribute

I have a set of four cards labeled "card", each representing different body parts: eyes, torso, arms, and legs. <div class="card" data-lesson="eyes">eyes</div> <div class="card" data-lesson="torso">torso</div> <div class="card" ...

javascriptjqueryhtmlcsslocal-storage

Creating a dynamic webpage with flexible design and interconnected containers using the Bootstrap framework

Creating a responsive layout with nested divs using Bootstrap Check out my HTML code below: <div class="container-fluid" style="height: 350px;"> <div class="row-fluid clearfix" style="height: 100%"> <div class="col-md-9 column" ...

htmlcsstwitter-bootstrapresponsive-design

Problem encountered during the transfer of JSON data from PHP to JavaScript

Currently, I am working on a PHP file that extracts data from a database to display it on a chart using the Chart.js library. The chart is functioning properly, but I am facing an issue where I need to use the json_encode() function to pass the array value ...

javascriptphphtmljsonajax

Printing specific div content from an HTML page using a print button

I have a situation where I need to control the printing functionality of my HTML page. Currently, I have two div tags in my code with a single print button at the top of the page. When I click on this button, it prints the content from both divs. However ...

htmlcss

Discover the power of EJS embedded within HTML attributes!

There are two cases in which I am attempting to use an EJS tag within an HTML attribute. SITUATION 1: <input style="background-image: url(<%= img.URL %>)" /> SITUATION 2: <input onchange="handleCheckboxChange(<%= i ...

javascripthtmlnode.jsejs

The jQuery function .val()/.text() is unable to retrieve information from a particular section of HTML

Implementing HandlebarsJS with PHP and Yii to generate a page. Here is a snippet of the html/handlebars code on the page {{#if embed_link}} <p class='f_hidden_p'> <a href='{{embed_link}}'> {{ ...

javascriptjqueryhtmlcssyii

Avoid activating the hover effect on an element situated below another element without the use of JavaScript

After reviewing various posts, it seems like the only solution involves using javascript. Is there a way to hover over one element without affecting the style of another element below it, all without relying on javascript? I'm looking for a solution u ...

htmlcss

Maintain consistent width of a page across different mobile devices

Currently, the content on my page does not have any viewport settings. It is simply using a 25% left and right margin for the entire content area. The issue arises when accessing the page from a mobile device, as the width adjusts to match the screen size ...

htmlcssresponsive-designviewport

Press the HTML link to interact with a text using JAVA

I am currently working on creating a class that is able to interact with an A text/button in HTML. The webpage requires a username and password, so I have utilized JSOUP to parse the document and insert the user and password details using the .data method: ...

javahtmlseleniumjsouphtmlunit

Ensure the Next/Image component fits neatly inside a div without distorting its aspect ratio, and keep the

I've been attempting to style a NextJS image in a way that it has rounded corners, expands to fit its container div (which is blue in the image), and maintains its aspect ratio (only known at runtime). However, what I currently have is not working as ...

cssreactjsnext.jstailwind-csscss-position

Revamp the md-select Container

Hello there! I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects. Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. I ...

cssangularjsangular-material