Tabs

<ul class="nav nav-tabs mb-3 nav-tabs-s1">  <li class="nav-item">    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#custom-home-tab-pane" type="button">Home</button>  </li>  <li class="nav-item">    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#custom-profile-tab-pane" type="button">Profile</button>  </li>  <li class="nav-item">    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#custom-contact-tab-pane" type="button">Contact</button>  </li></ul><div class="tab-content" id="myTabContent">  <div class="tab-pane fade show active" id="custom-home-tab-pane">    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate dolorem ipsa sequi rerum suscipit, tenetur exercitationem debitis! Incidunt obcaecati dolorem, mollitia est quaerat dignissimos amet placeat soluta eaque quas.  </div>  <div class="tab-pane fade" id="custom-profile-tab-pane">    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate dolorem ipsa sequi rerum suscipit, tenetur exercitationem debitis! Incidunt obcaecati dolorem, mollitia est quaerat dignissimos amet placeat soluta eaque quas.  </div>  <div class="tab-pane fade" id="custom-contact-tab-pane">    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate dolorem ipsa sequi rerum suscipit, tenetur exercitationem debitis! Incidunt obcaecati dolorem, mollitia est quaerat dignissimos amet placeat soluta eaque quas.  </div></div>

<ul class="nav nav-tabs mb-3">  <li class="nav-item">    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button">Home</button>  </li>  <li class="nav-item">    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button">Profile</button>  </li>  <li class="nav-item">    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button">Contact</button>  </li></ul><div class="tab-content">  <div class="tab-pane fade show active" id="home-tab-pane">    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate dolorem ipsa sequi rerum suscipit, tenetur exercitationem debitis! Incidunt obcaecati dolorem, mollitia est quaerat dignissimos amet placeat soluta eaque quas.  </div>  <div class="tab-pane fade" id="profile-tab-pane">    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate dolorem ipsa sequi rerum suscipit, tenetur exercitationem debitis! Incidunt obcaecati dolorem, mollitia est quaerat dignissimos amet placeat soluta eaque quas.  </div>  <div class="tab-pane fade" id="contact-tab-pane">    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate dolorem ipsa sequi rerum suscipit, tenetur exercitationem debitis! Incidunt obcaecati dolorem, mollitia est quaerat dignissimos amet placeat soluta eaque quas.  </div></div>

<ul class="nav nav-pills mb-3">  <li class="nav-item">    <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#pills-home" type="button">Home</button>  </li>  <li class="nav-item">    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button">Profile</button>  </li>  <li class="nav-item">    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button">Contact</button>  </li>  <li class="nav-item">    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" disabled>Disabled</button>  </li></ul><div class="tab-content">  <div class="tab-pane fade show active" id="pills-home">    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!  </div>  <div class="tab-pane fade" id="pills-profile">    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!  </div>  <div class="tab-pane fade" id="pills-contact">    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!  </div>  <div class="tab-pane fade" id="pills-disabled">    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!  </div></div> 

<div class="row align-items-start g-gs">  <div class="col-lg-3 col-xl-2">    <div class="nav flex-column nav-pills">      <button class="nav-link text-start active" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button">Home</button>      <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button">Profile</button>      <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" disabled>Disabled</button>      <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button">Messages</button>      <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button">Settings</button>    </div>  </div>  <div class="col-lg-9 col-xl-10">    <div class="tab-content">      <div class="tab-pane fade show active" id="v-pills-home">        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.      </div>      <div class="tab-pane fade" id="v-pills-profile">        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.      </div>      <div class="tab-pane fade" id="v-pills-disabled">        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.      </div>      <div class="tab-pane fade" id="v-pills-messages">        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.      </div>      <div class="tab-pane fade" id="v-pills-settings">        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.      </div>    </div>  </div></div>