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

Connecting an external SVG file to its corresponding HTML code

Can I connect my SVG file to my CSS file for a line animation? I'm uncertain about including the SVG code directly in my HTML file. ...

htmlcsssvg

When switching from JavaScript to jQuery, the button values become invisible

Currently, I have a functional app that can dynamically change the values of buttons based on user input. The current implementation is in vanilla JavaScript within the script.js file. However, I am looking to enhance the functionality and user experience ...

javascriptjqueryhtmlcssajax

Utilizing float positioning in Responsive Web Design

Attempting to implement a two-column float CSS layout with specific width percentages. My CSS styles for the two columns are as follows: .div1 { width: 25%; float: left; } .div2 { width: 75%; float: right; } .container { width: 960px; } @media scr ...

cssresponsive-design

HTML and Javascript Form Integration for Sage Pay Purchase Button

Currently, I am working on a project that includes online payment options via PayPal and Google Wallet, with a "buy now" button. Now, my next step is to incorporate the Sage Pay "buy now" button onto the website using HTML and JavaScript. Although I have ...

javascripthtmlopayo

Exploring AngularJS: A Guide to Accessing Millisecond Time

Is there a way to add milliseconds in Time using AngularJS and its "Interval" option with 2 digits? Below is the code snippet, can someone guide me on how to achieve this? AngularJs Code var app = angular.module('myApp', []); app.controller(&ap ...

javascripthtmlcssangularjs

When arranging elements using the @media feature in CSS grid, a phantom element seems to mysteriously appear

Apologies for the extensive uploads, I'm not sure how else to proceed. I'm attempting to rearrange my grid layout at a specific width so that the paragraphs repeat with the images. However, I'm encountering a random space between 1 and 2 whe ...

htmlcssfrontendcss-grid

Adjust the field's color depending on the outcome displayed within

I'm trying to implement a feature where the field value changes to green when "OK" is selected and red when "NOK" is chosen. I have written the following JavaScript code but it's not working as expected - the colors change before clicking submit, ...

javascripthtmljquerycss

Tips for adjusting the progress bar to 100% and back to 0%

My goal is to increase the progress bar percentage with each click. Currently, it only goes up to 75%. When saving, it should show 100%, but it's not displaying that properly. On clicking the back button, it should reset to 0% on the third click. HTM ...

javascripthtmlcss

Spread out a div across a container's width

Currently, I am struggling to modify my css and html in order to have a div expand horizontally into a scrollable div. However, all I seem to get is the content stacking once the width limit is reached. Take a look at this fiddle for reference. The absol ...

htmlcss

Labels can sometimes cause text input fields to become unresponsive

I've encountered a bug while working on my website with the materializecss framework. Sometimes, inputs are not responding correctly. This issue seems to occur when clicking on the first input and accidentally targeting the higher part of the second ...

javascripthtmlmaterialize

Using jQuery to update the CSS background of a selected element among multiple elements sharing the same class

I am currently developing a basic jQuery script that will enable the background color of the clicked element to change. Below is the code I have so far: <dt> <input id="p_method_banktransfer" value="banktransfer" type="radio" name="payment[metho ...

javascriptjqueryhtmlcss

How to style an HTML table with just a bottom border

Is there a way to recreate the Staff Directory section of this page using only HTML, without having to rely on CSS and Javascript? Specifically, I want to create a table with only bottom borders/dividers for each line. Any suggestions on how to achieve thi ...

htmlhtml-tableborderdivider

Set maximum size for background image in div

I'm facing some challenges with setting the maximum height of a background image within a div. I want the max height to be equal to the actual height of the image, without stretching it. Ideally, if there is excess content in the div, it should stop a ...

javascriptjqueryhtmlcss

Enlargen div or unordered list according to content exceeding limits

What is the best way to ensure a div expands when it contains a lot of content? Code Example (HTML): <div class="content"> Content goes here <br /> Content goes here <br /> Content goes here <br /> Content goes her ...

jqueryhtmlcssxhtml

Leveraging the power of JavaScript to reveal concealed div elements

I've got a collection of divs (five in total) with a hidden class applied to them in my CSS stylesheet. Each div also has its own unique ID. My goal is to use JavaScript to reveal these divs one by one. Here's an example of what I'm looking ...

javascriptcssclasshtml

How to locate every JavaScript event connected with an HTML element by utilizing Google Chrome

Looking for an easy method to identify all JavaScript events linked to a specific HTML element in Chrome? For example: HTML element <a href="#" class="cancel_link refresh_page">Cancel</a> Script: <script type="text/javascript"> $ ...

javascriptjqueryhtmlgoogle-chrome

What is the solution to eliminating the MultiValueDictKey error when making an AJAX get request?

When handling multiple divs on a web page, each containing a form, I encountered the need to utilize AJAX Get functionality. The goal was to pass the text entered into a form along with the ID of the corresponding div to a Django view for storage in a data ...

javascriptjqueryhtmlajaxdjango

Some pages are receiving images from the CDN, while others are not

I am encountering some challenges while troubleshooting an issue on a website. The CDN (content delivery network) is functioning properly on some pages but not on others. Initially, I suspected a typo in the path, but that does not seem to be the case. F ...

htmlcontent-management-systemcdnimage-optimization

Exploring how to set dropdown menu width for Angular2 mat-select options

Currently, I am using the angular2 mat-select control and facing an issue with the width and position of its dropdown list menu. By default, it is wider and overflows the element on both sides by a few pixels. I have not found any option for adjusting the ...

cssangularangular-material2

Problems with implementing media queries in CSS

Our team is currently delving into the realm of responsive design and experimenting with a mobile-first framework. In an attempt to utilize media queries to adjust our layout based on screen size, we have crafted the following CSS: .flex, .cards, .card { ...

csstwitter-bootstrapresponsive-designmedia-queries