Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap tab outlining to the left as soon as i click other tab

I made a small footer using bootstrap with a tab, but whenever i click the second value, the full div moves over to the left. How do i get it to stay in its place?

This is my code. and 2 pictures of how the first tab positions the right way, and how the second 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">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:[email protected]">[email protected]</a></p><p>Adres: Koningin Wilhelminaplein 1, Amsterdam</p></div>
              </div>
          </div>
      </div>
  </div>
</footer>

Tab 1
Tab 2

I tried a bunch of positioning with bootstrap but cannot manage to find out what makes it so it instantly moves to the left whenever the tab changes

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The navbar class gave the footer certain properties that allowed that to happen. I removed "navbar" from the footer, and that resolved the issue.


  2. 0

    Just remove the word ‘navbar’ from the footer’s class attribute. Here’s the working demo:

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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="navbar-brand 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:[email protected]">[email protected]</a></p><p>Adres: Koningin Wilhelminaplein 1, Amsterdam</p></div>
              </div>
          </div>
      </div>
  </div>
</footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search