javascriptcsstwitter-bootstrapflexbox

Bootstrap 5 tab panes not working with flexbox properly

I am using barebones Bootstrap 5 tabs(pills) setup straight from Docs page:

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

I then populate tab-panes with floating-divs:

.floating-div {
  float: left;
  display: block;
  height: 100px;
  width: 100px;
  border: 1px solid #dddddd;
  margin: 10px 10px 0 0;
}

.pane-1 {  
  background-color: green;  
}

.pane-2 {  
  background-color: orange;  
}

.pane-3 {  
  background-color: blue;  
}

Up to this point everything works as expected - JsFiddle .

Then I am applying standard bootstrap's flexbox classes to tab-panes to align tab content to my liking d-flex flex-wrap justify-content-between.

That's where the whole thing went downhill - JsFiddle .

The way the content in the first tab-pane lays out is what I am after, but for some reason content in all the other tab-panes is shifted down. Not only that, but, on the close inspection it appears that each of the tab-panes contain ALL the floating-divs that supposed to be spread out across 3 different divs, some of them are just invisible...

Now my question is: Is there something wrong with my CSS or with the way I use Bootstrap's flexbox classes, or is it a bug in Bootstrap?

Solution

  • Because the ".d-flex" attribute comes with the "display: flex! Important" specifier.

    But ".tab-content> .tab-pane" only uses "display: none" format. In this case, ".d-flex" will dominate and will remain as "display: flex" in all cases.

    On the other hand, since "opacity: 0" is invisible, but it will take up space.

    To solve this,

    Method 1:

    Create a new element inside ".tab-pane".

    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="d-flex flex-wrap justify-content-between">
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>  
</div>
</div>

    Method 2:

    Writing a new class. ".d-maybe-flex"

    .d-maybe-flex
{
  display: flex;
}

    <div class="tab-pane fade show active d-maybe-flex flex-wrap justify-content-between" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>  
</div>

    Example 1

    .floating-div {
  float: left;
  display: block;
  height: 100px;
  width: 100px;
  border: 1px solid #dddddd;
  margin: 10px 10px 0 0;
}

.pane-1 {
  background-color: green;
}

.pane-2 {
  background-color: orange;
}

.pane-3 {
  background-color: blue;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Green</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Ornage</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Blue</a>
  </li>
</ul>

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <div class="d-flex flex-wrap justify-content-between">
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
    </div>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <div class="d-flex flex-wrap justify-content-between">
      <div class="floating-div pane-2"></div>
      <div class="floating-div pane-2"></div>
      <div class="floating-div pane-2"></div>
      <div class="floating-div pane-2"></div>
      <div class="floating-div pane-2"></div>
    </div>
  </div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
    <div class="d-flex flex-wrap justify-content-between">
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
    </div>
  </div>
</div>

    Example 2

    .d-maybe-flex {
  display: flex
}

.floating-div {
  float: left;
  display: block;
  height: 100px;
  width: 100px;
  border: 1px solid #dddddd;
  margin: 10px 10px 0 0;
}

.pane-1 {
  background-color: green;
}

.pane-2 {
  background-color: orange;
}

.pane-3 {
  background-color: blue;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Green</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Ornage</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Blue</a>
  </li>
</ul>

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active d-maybe-flex flex-wrap justify-content-between" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
  </div>
  <div class="tab-pane fade d-maybe-flex flex-wrap justify-content-between" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <div class="floating-div pane-2"></div>
    <div class="floating-div pane-2"></div>
    <div class="floating-div pane-2"></div>
    <div class="floating-div pane-2"></div>
    <div class="floating-div pane-2"></div>
  </div>
  <div class="tab-pane fade d-maybe-flex flex-wrap justify-content-between" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
  </div>
</div>