Bootstrap 5 Tab Pane width content

Viewed 387

My tab panels have problem with content width - it doesnt work with columns - it can't divide a tab-pane as col-md-7 and col-md-5 (look at screen below). I dont know how to make it works.

<div  class="container py-5">
    <div class="row py-3">
    <div class="col-lg-12">
    <div class="card h-100">
    <div class="card-header py-3"><b>Działalność</b> | Zarządzanie</div>
                <div class="card-body">
              
                <div id="zarzadzanie" class="zarzadzanie d-flex align-items-start">
  <div class="nav flex-column nav-pills me-5" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active my-2" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
      Podstawowe</button>
    <button class="nav-link my-2" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">
      Kolorystyka</button>
    <button class="nav-link my-2" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">
      Adresy</button>
    <button class="nav-link my-2" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">
      Historia</button>
  </div>
  <!-- TAB-CONTENT -->
  <div class="tab-content" id="v-pills-tabContent">
    <!-- Ustawienia 1 --->
    <div class="tab-pane fade show active pt-2" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">

    <div class="row pb-2">
                        <div class="col-md-7">
                            <p>Tabs can be used to contain  </p>
                        </div>
                        <div class="col-md-5">dsdas</div>
                    </div>




    </div>
    <!-- Ustawienia 2 --->
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
      
    
    </div>
    <!-- Ustawienia 3 --->
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">



    </div>
    <!-- Ustawienia 4 --->
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">



    </div>
    <!-- END TAB-CONTENT-->
  </div>
  <!-- </> END TAB-CONTENT-->
</div>

                </div>
            </div>
    </div>
    </div>
</div>

I would be very grateful for your help guys.

Problem on image

1 Answers

I added w-100 to every parent and it works. To the tab-content and the tab-pane

Related