Search code examples
htmlcsstwitter-bootstraptabsnav-pills

Trying to get stacked tabs working on mobile

I am trying to get the buttons to be full width on mobile and the tabbed content to be full width mobile, everything else should be col-2 buttons and col-10 content

.tab-content>.tab-pane,
.pill-content>.pill-pane {
  display: none;
}

.tab-content>.active,
.pill-content>.active {
  display: block;
}

.double-border {
  --b: 2px;
  /* thickness */
  --c: #3CD5AF;
  height: 100%;
  border-right: var(--b) solid var(--c);
  border-left: var(--b) solid var(--c);
  background: linear-gradient(var(--c) 0 0) left 10px bottom 0/var(--b) 50% no-repeat, linear-gradient(var(--c) 0 0) right 10px bottom 0/var(--b) 50% no-repeat
}

.btn-new {
  flex: 1 1 auto;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: black;
  box-shadow: 4px 6px 8px 0 rgb(0 0 0 / 10%), 0 6px 20px 0 rgb(255 255 255 / 10%);
  background: white;
}

.btn-new.active {
  flex: 1 1 auto;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  h4 {
    color: white;
  }
  small {
    color: white;
  }
}

.btn-new.h4.active {
  color: white;
}


/* Demo Stuff End -> */


/* <- Magic Stuff Start */

.btn-new:hover {
  background-position: right center;
  /* change the direction of the change here */
}

.btn-1.active {
  background-image: linear-gradient(to right, #006072 0%, #000000 51%, #006072 100%);
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />




<section <?php theme_section_attr_id() ?>
  <?php theme_section_attr_class( 'main-section position-relative' ) ?>
  <div class="container">
    <div class="row">
      <h1 class="text-center pb-3">In house <strong style="font-weight:700;">Schedule</strong></h1>
      <div class="d-flex align-items-start">
        <div class="nav col-sm-12 col-2 flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
          <button class="nav-link border-0 btn-new btn-1 px-3 pb-0 pt-3 mb-4 active text-start" id="v-pills-1-tab" data-bs-toggle="pill" data-bs-target="#v-pills-1" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
                    <small class="m-0">Tuesday</small>
                    <h4 class="text-capitalize" style="font-weight: 600;">May 7th</h4>
                    </button>
          <button class="nav-link border-0 btn-new btn-1 px-3 pb-0 pt-3 mb-4 text-start " id="v-pills-2-tab" data-bs-toggle="pill" data-bs-target="#v-pills-2" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">
                    <small class="m-0">Wednesday</small>
                    <h4 class="text-capitalize" style="font-weight: 600;">May 8th</h4>
                    </button>
        </div>

        <div class="tab-content col-sm-12 col-10" id="v-pills-tabContent">
          <div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-1-tab">

            <div class="row pb-5">
              <div class="col-lg-2 text-center">
                <strong> 10:00 AM </strong>
              </div>
              <div class="col-lg-8 double-border px-5">
                <strong>title</strong>
                <p class="mt-2">text</p>
                <a hreff="">link</a></a>
              </div>
              <div class="col-lg-2 d-flex align-items-center justify-content-center">
                <img src="/wp-content/themes/t220908406929/dist/images/logo-dark.svg" alt="" class="img-fluid">
              </div>
            </div>

            <div class="row pb-5">
              <div class="col-lg-2 text-center">
                <strong> 10:30 AM </strong>
              </div>
              <div class="col-lg-8 double-border px-5">
                <strong>title</strong>
                <p class="mt-2">text</p>
                <a hreff="">link</a></a>
              </div>
              <div class="col-lg-2 d-flex align-items-center justify-content-center">
                <img src="/wp-content/uploads/2024/04/Group-1000002059.png" alt="" class="img-fluid">
              </div>
            </div>

            <div class="row pb-5">
              <div class="col-lg-2 text-center">
                <strong> 11:00 AM </strong>
              </div>
              <div class="col-lg-8 double-border px-5">
                <strong>title</strong>
                <p class="mt-2">text</p>
                <a hreff="">link</a></a>
              </div>
              <div class="col-lg-2 d-flex align-items-center justify-content-center">
                <img src="/wp-content/themes/t220908406929/dist/images/logo-dark.svg" alt="" class="img-fluid">
              </div>
            </div>



          </div>

          <div class="tab-pane fade show " id="v-pills-2" role="tabpanel" aria-labelledby="v-pills-2-tab">

            <div class="row pb-5">
              <div class="col-lg-2 text-center">
                <strong> 10:00 AM </strong>
              </div>
              <div class="col-lg-8 double-border px-5">
                <strong>title</strong>
                <p class="mt-2">text.</p>
                <a hreff="">link</a></a>
              </div>
              <div class="col-lg-2 d-flex align-items-center justify-content-center">
                <img src="/wp-content/themes/t220908406929/dist/images/logo-dark.svg" alt="" class="img-fluid">
              </div>
            </div>



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


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

Aim

Mobile view for buttons to be 100% and content to be 100% so stacked, buttons on top and content bellow

Solution

  • Something like this? I hope this is what you want.

    Usually it's good to know classes like w-md-auto, and w-100, for example. All is documented inside Bootstrap Documentation.

    .tab-content>.tab-pane,
.pill-content>.pill-pane {
  display: none;
}

.tab-content>.active,
.pill-content>.active {
  display: block;
}

.double-border {
  --b: 2px;
  /* thickness */
  --c: #3CD5AF;
  height: 100%;
  border-right: var(--b) solid var(--c);
  border-left: var(--b) solid var(--c);
  background: linear-gradient(var(--c) 0 0) left 10px bottom 0/var(--b) 50% no-repeat, linear-gradient(var(--c) 0 0) right 10px bottom 0/var(--b) 50% no-repeat
}

.btn-new {
  flex: 1 1 auto;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: black;
  box-shadow: 4px 6px 8px 0 rgb(0 0 0 / 10%), 0 6px 20px 0 rgb(255 255 255 / 10%);
  background: white;
}

.btn-new.active {
  flex: 1 1 auto;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  h4 {
    color: white;
  }
  small {
    color: white;
  }
}

.btn-new.h4.active {
  color: white;
}


/* Demo Stuff End -> */


/* <- Magic Stuff Start */

.btn-new:hover {
  background-position: right center;
  /* change the direction of the change here */
}

.btn-1.active {
  background-image: linear-gradient(to right, #006072 0%, #000000 51%, #006072 100%);
}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />




<section <?php theme_section_attr_id() ?>
  <?php theme_section_attr_class( 'main-section position-relative' ) ?>
  <div class="container-fluid">
    <div class="row">
      <h1 class="text-center pb-3">In house <strong style="font-weight:700;">Schedule</strong></h1>
      <div class="col-md-2 d-flex align-items-start">
        <div class=" w-100 w-md-auto nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
          <button class="nav-link border-0 btn-new btn-1 px-3 pb-0 pt-3 mb-4 active text-start" id="v-pills-1-tab" data-bs-toggle="pill" data-bs-target="#v-pills-1" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
            <small class="m-0">Tuesday</small>
            <h4 class="text-capitalize" style="font-weight: 600;">May 7th</h4>
          </button>
          <button class="nav-link border-0 btn-new btn-1 px-3 pb-0 pt-3 mb-4 text-start w-100 w-sm-auto" id="v-pills-2-tab" data-bs-toggle="pill" data-bs-target="#v-pills-2" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">
            <small class="m-0">Wednesday</small>
            <h4 class="text-capitalize" style="font-weight: 600;">May 8th</h4>
          </button>
        </div>
      </div>

      <div class="col-md-10">
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-1-tab">

            <div class="row pb-5">
              <div class="col-lg-2 text-center">
                <strong> 10:00 AM </strong>
              </div>
              <div class="col-lg-8 double-border px-5">
                <strong>title</strong>
                <p class="mt-2">text</p>
                <a hreff="">link</a></a>
              </div>
              <div class="col-lg-2 d-flex align-items-center justify-content-center">
                <img src="/wp-content/themes/t220908406929/dist/images/logo-dark.svg" alt="" class="img-fluid">
              </div>
            </div>

            <div class="row pb-5">
              <div class="col-lg-2 text-center">
                <strong> 10:30 AM </strong>
              </div>
              <div class="col-lg-8 double-border px-5">
                <strong>title</strong>
                <p class="mt-2">text</p>
                <a hreff="">link</a></a>
              </div>
              <div class="col-lg-2 d-flex align-items-center justify-content-center">
                <img src="/wp-content/uploads/2024/04/Group-1000002059.png" alt="" class="img-fluid">
              </div>
            </div>

            <div class="row pb-5">
              <div class="col-lg-2 text-center">
                <strong> 11:00 AM </strong>
              </div>
              <div class="col-lg-8 double-border px-5">
                <strong>title</strong>
                <p class="mt-2">text</p>
                <a hreff="">link</a></a>
              </div>
              <div class="col-lg-2 d-flex align-items-center justify-content-center">
                <img src="/wp-content/themes/t220908406929/dist/images/logo-dark.svg" alt="" class="img-fluid">
              </div>
            </div>



          </div>

          <div class="tab-pane fade show " id="v-pills-2" role="tabpanel" aria-labelledby="v-pills-2-tab">

            <div class="row pb-5">
              <div class="col-lg-2 text-center">
                <strong> 10:00 AM </strong>
              </div>
              <div class="col-lg-8 double-border px-5">
                <strong>title</strong>
                <p class="mt-2">text.</p>
                <a hreff="">link</a></a>
              </div>
              <div class="col-lg-2 d-flex align-items-center justify-content-center">
                <img src="/wp-content/themes/t220908406929/dist/images/logo-dark.svg" alt="" class="img-fluid">
              </div>
            </div>



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


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