text: jQuery(function($) {
      // because "Login Here" and "Signup now" links are not inside a "UL" or ".nav", they preserve "active" class
      // and we should remove that, to be able to move between tab panes
      $('a[data-toggle="tab"]')
      .on('click', function() {
          $('a[data-toggle="tab"]').removeClass('active')
      })
  
  
      // start/show carousel to change backgrounds
      $('#id-start-carousel')
      .on('click', function(e) {
          e.preventDefault()
          $('.carousel-indicators').removeClass('d-none')
          $('#loginBgCarousel').carousel(1)
      })
  
      var isFullsize = false
  
      // remove the background/carousel section
      // if you want a compact login page (without the carousel area), you should do so in your HTML
      // but in this demo, we modify HTML using JS
      $('#id-remove-carousel')
      .on('click', function(e) {
          e.preventDefault()
  
          $('#id-col-intro').remove() // remove the .col that contains carousel/intro
          $('#id-col-main').removeClass('col-lg-7') // remove the col-* class name for the login area
  
          $('#row-1')
          .addClass('justify-content-center')// so .col is centered
  
          .find('> .col-12') // change .col-12.col-xl-10, etc to .col-12.col-lg-6.col-xl-5 (so our login area is 50% of document width in `lg` mode , etc)        
          .removeClass('col-12 col-xl-10 offset-xl-1').addClass(!isFullsize ? 'col-12 col-lg-6 col-xl-5' : '')
          
  
          $('.col-md-8.offset-md-2.col-lg-6.offset-lg-3')// the input elements that are inside "col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3" columns
                                                         // ... remove '.col-lg-6 offset-lg-3' (will become .col-md-8)
          .removeClass('col-lg-6 offset-lg-3')
  
          // remove "Welcome Back" etc titles that were meant for desktop, and show the other titles that were meant for mobile (lg-) view
          // because this compact login page is similar to mobile view
          $('h4').each(function() {
              var mobileTitle = $(this).parent().next()
              if (mobileTitle.hasClass('d-lg-none')) mobileTitle.removeClass('d-lg-none').prev().remove()
          })
      })
  
  
      // make the login area fullscreen
      // if you want a fullscreen login page you should do so in your HTML
      // but in this demo, we modify HTML using JS
      $('#id-fullscreen')
      .on('click', function(e) {
          e.preventDefault()
          if (window.navigator.msPointerEnabled) $('.body-container').addClass('h-100') // for IE only
  
          isFullsize = true
  
          $('.main-container').removeClass('container')
  
          $('.main-content').removeClass('justify-content-center minh-100').addClass('px-4 px-lg-0')
          .children().attr('class', 'd-flex flex-column flex-lg-row flex-grow-1 my-3 m-lg-0') // removes padding classes and add d-flex, etc
          
          $('#row-1')
          .addClass('flex-grow-1')        
          .find('> .col-12').removeClass('shadow radius-1 col-xl-10 offset-xl-1').addClass('d-lg-flex') //remove shadow, etc from, the child .col and add d-lg-flex
          
          $('#row-2').addClass('flex-grow-1')
  
          $('#id-col-intro').removeClass('col-lg-5').addClass('col-lg-4')
          $('#id-col-main').removeClass('col-lg-7 offset-2').addClass('col-lg-6 mx-auto d-flex align-items-center justify-content-center')
      })
  
  })