Bootstrap 4, как автоматически прокрутить содержимое открытой вкладки?

Question

При просмотре моей страницы на мобильном телефоне пользователь нажимает на вкладку и не может узнать, открыта ли она, так как она находится внизу и для ее просмотра требуется прокрутка.

Когда пользователь нажимает на вкладку, я бы хотел, чтобы она автоматически прокручивалась до открытого содержимого.

Я попытался воспользоваться решением, приведенным здесь, но не смог заставить его работать для моей конкретной страницы: Эффект прокрутки вкладок Bootstrap к содержимому при нажатии

Любая помощь будет принята с благодарностью!

Спасибо

Тим

jQuery(document).ready(function($) {

  $('.nav a').click(function(e) {
    e.preventDefault()
    $(this).tab('show')
  })

  $('a.scroll').on('click', function(e) {
    var href = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(href).offset().top
    }, 'slow');
    e.preventDefault();
  });




});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<section class="ftco-section ftco-schedule" id="schedule-section">
  <div class="container">
    <div class="row justify-content-center pb-5">
      <div class="col-md-12 heading-section text-center ftco-animate">
      </div>
    </div>
    <div class="ftco-schedule">
      <div class="row">
        <div class="col-md-4 nav-link-wrap">
          <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">

            <a class="nav-link ftco-animate" id="v-pills-9-tab" data-toggle="pill" href="#v-pills-9" role="tab" aria-controls="v-pills-9" aria-selected="false">Tuesday <span>Muay Thai & Mixed Martial Arts</span></a>
            <a class="nav-link ftco-animate" id="v-pills-10-tab" data-toggle="pill" href="#v-pills-10" role="tab" aria-controls="v-pills-10" aria-selected="false">Wednesday <span>Muay Thai & Mixed Martial Arts</span></a>
            <a class="nav-link ftco-animate" id="v-pills-11-tab" data-toggle="pill" href="#v-pills-11" role="tab" aria-controls="v-pills-11" aria-selected="false">Thursday <span>Muay Thai, Mixed Martial Arts & Boxing</span></a>
            <a class="nav-link ftco-animate" id="v-pills-13-tab" data-toggle="pill" href="#v-pills-13" role="tab" aria-controls="v-pills-13" aria-selected="false">Saturday <span>Muay Thai</span></a>
          </div>
        </div>
        <div class="col-md-8 tab-wrap">

          <div class="tab-content" id="v-pills-tabContent">

            <div class="tab-pane fade show active" id="v-pills-8" role="tabpanel" aria-labelledby="v-pills-day-8-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <i class="far fa-hand-point-left fa-4x"></i>
                <div class="text pl-md-5">
                  <h2>Click to see the schedule</h2>
                </div>
              </div>

            </div>

            <div class="tab-pane fade" id="v-pills-9" role="tabpanel" aria-labelledby="v-pills-day-9-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p> Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-10" role="tabpanel" aria-labelledby="v-pills-day-10-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/roy-eubank-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Roy Eubank</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/roy-eubank-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p>Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Roy Eubank</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-11" role="tabpanel" aria-labelledby="v-pills-day-11-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p>Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/pat-swan-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:15PM - 8:15PM</span>
                  <h2><a href="#">Boxing</a></h2>
                  <p>All experience levels are welcome to attend this class taught by professional boxer, Pat Swan. </p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Pat Swan</a> <span class="position">Boxing Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-13" role="tabpanel" aria-labelledby="v-pills-day-13-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">12:00PM - 12:45PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In addition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

Попробуйте добавить анимацию прокрутки внутри setTimeout и нажмите a.nav-link вместо a.scroll.

jQuery(document).ready(function($) {

  $('.nav a').click(function(e) {
    e.preventDefault()
    $(this).tab('show')
  })

  $('a.nav-link').on('click', function(e) {
    var href = $(this).attr('href');
    setTimeout(() => {
      $('html, body').animate({
        scrollTop: $(href + '.active').offset().top
      }, 'slow');
    }, 500);
    e.preventDefault();
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<section class="ftco-section ftco-schedule" id="schedule-section">
  <div class="container">
    <div class="row justify-content-center pb-5">
      <div class="col-md-12 heading-section text-center ftco-animate">
      </div>
    </div>
    <div class="ftco-schedule">
      <div class="row">
        <div class="col-md-4 nav-link-wrap">
          <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">

            <a class="nav-link ftco-animate" id="v-pills-9-tab" data-toggle="pill" href="#v-pills-9" role="tab" aria-controls="v-pills-9" aria-selected="false">Tuesday <span>Muay Thai & Mixed Martial Arts</span></a>
            <a class="nav-link ftco-animate" id="v-pills-10-tab" data-toggle="pill" href="#v-pills-10" role="tab" aria-controls="v-pills-10" aria-selected="false">Wednesday <span>Muay Thai & Mixed Martial Arts</span></a>
            <a class="nav-link ftco-animate" id="v-pills-11-tab" data-toggle="pill" href="#v-pills-11" role="tab" aria-controls="v-pills-11" aria-selected="false">Thursday <span>Muay Thai, Mixed Martial Arts & Boxing</span></a>
            <a class="nav-link ftco-animate" id="v-pills-13-tab" data-toggle="pill" href="#v-pills-13" role="tab" aria-controls="v-pills-13" aria-selected="false">Saturday <span>Muay Thai</span></a>
          </div>
        </div>
        <div class="col-md-8 tab-wrap">

          <div class="tab-content" id="v-pills-tabContent">

            <div class="tab-pane fade show active" id="v-pills-8" role="tabpanel" aria-labelledby="v-pills-day-8-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <i class="far fa-hand-point-left fa-4x"></i>
                <div class="text pl-md-5">
                  <h2>Click to see the schedule</h2>
                </div>
              </div>

            </div>

            <div class="tab-pane fade" id="v-pills-9" role="tabpanel" aria-labelledby="v-pills-day-9-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p> Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-10" role="tabpanel" aria-labelledby="v-pills-day-10-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/roy-eubank-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Roy Eubank</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/roy-eubank-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p>Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Roy Eubank</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-11" role="tabpanel" aria-labelledby="v-pills-day-11-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p>Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/pat-swan-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:15PM - 8:15PM</span>
                  <h2><a href="#">Boxing</a></h2>
                  <p>All experience levels are welcome to attend this class taught by professional boxer, Pat Swan. </p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Pat Swan</a> <span class="position">Boxing Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-13" role="tabpanel" aria-labelledby="v-pills-day-13-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">12:00PM - 12:45PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In addition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

Использование shown.bs.tab событие

Это событие запускается на вкладке шоу после отображения вкладки.Используйте event.target и event.relatedTarget, чтобы нацелить активную вкладку и предыдущую активную вкладку (если доступно) соответственно.

$('a.nav-link').on('shown.bs.tab', function(e) {
  var href = $(this).attr('href');
  $('html, body').animate({
    scrollTop: $(href).offset().top
  }, 'slow');
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<section class="ftco-section ftco-schedule" id="schedule-section">
  <div class="container">
    <div class="row justify-content-center pb-5">
      <div class="col-md-12 heading-section text-center ftco-animate">
      </div>
    </div>
    <div class="ftco-schedule">
      <div class="row">
        <div class="col-md-4 nav-link-wrap">
          <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">

            <a class="nav-link ftco-animate" id="v-pills-9-tab" data-toggle="pill" href="#v-pills-9" role="tab" aria-controls="v-pills-9" aria-selected="false">Tuesday <span>Muay Thai & Mixed Martial Arts</span></a>
            <a class="nav-link ftco-animate" id="v-pills-10-tab" data-toggle="pill" href="#v-pills-10" role="tab" aria-controls="v-pills-10" aria-selected="false">Wednesday <span>Muay Thai & Mixed Martial Arts</span></a>
            <a class="nav-link ftco-animate" id="v-pills-11-tab" data-toggle="pill" href="#v-pills-11" role="tab" aria-controls="v-pills-11" aria-selected="false">Thursday <span>Muay Thai, Mixed Martial Arts & Boxing</span></a>
            <a class="nav-link ftco-animate" id="v-pills-13-tab" data-toggle="pill" href="#v-pills-13" role="tab" aria-controls="v-pills-13" aria-selected="false">Saturday <span>Muay Thai</span></a>
          </div>
        </div>
        <div class="col-md-8 tab-wrap">

          <div class="tab-content" id="v-pills-tabContent">

            <div class="tab-pane fade show active" id="v-pills-8" role="tabpanel" aria-labelledby="v-pills-day-8-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <i class="far fa-hand-point-left fa-4x"></i>
                <div class="text pl-md-5">
                  <h2>Click to see the schedule</h2>
                </div>
              </div>

            </div>

            <div class="tab-pane fade" id="v-pills-9" role="tabpanel" aria-labelledby="v-pills-day-9-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p> Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-10" role="tabpanel" aria-labelledby="v-pills-day-10-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/roy-eubank-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Roy Eubank</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/roy-eubank-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p>Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Roy Eubank</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-11" role="tabpanel" aria-labelledby="v-pills-day-11-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p>Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/pat-swan-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:15PM - 8:15PM</span>
                  <h2><a href="#">Boxing</a></h2>
                  <p>All experience levels are welcome to attend this class taught by professional boxer, Pat Swan. </p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Pat Swan</a> <span class="position">Boxing Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-13" role="tabpanel" aria-labelledby="v-pills-day-13-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">12:00PM - 12:45PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In addition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>