"BOOTSTRAP 4 UX FOOTER CONTROL"
Bootstrap 4.0.0 Snippet by breizhwave

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> <script src="http://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js" ></script> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile.structure-1.5.0-alpha.1.min.css"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <style>[data-role=footer] { position: absolute; bottom: 00px; width: 100%; padding:10px; z-index:900; } i{font-size:40px; border:3px solid black; width:70px; height:70px; margin:5px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;padding:10px} i.noborder{border:none} .wavepopup{ right: 10%; left: 10%; width: 100%; }.no-transition { transition: none !important; } .collapsing { -webkit-transition: none; transition: none; display: none; } .waverulearea { position: absolute; bottom: 110px; width: 100%; height: 100px; /* Set the fixed height of the footer here */ z-index:1000; margin-bottom:0; } .waveiconlink{height:75px; width:75px} .waveiconlink { transition: transform .2s ease-in-out; } .waveiconlink:hover { transform: scale(1.1); } /*img {*/ /*pointer-events: none;*/ /*}*/ </style> <script> $( document ).ready(function() { $('.waveclose').on('click', function(){ $('.waverulearea.collapse').collapse('hide'); }); $.support.transition = false }); </script> <style> .swiper-container { width: 100%; height: 100%; } </style> </head> <body> <div data-role="page" class="content"> <h1>FOOTER CONTROL</h1> <div id="idWaveScene" class="waveScene"></div> <div class="collapse waverulearea alert alert-primary container-fluid" id="lng1"><div class="row"> <div class="col">HEIGHT <br> <input type="range" name="slider-1" id="inputLongeurMur" min="40" max="80" value="50"> </div> <div class="col col-auto justify-content-center align-self-center"> <a href="#" class="waveclose"> <i class="fas fa-times-circle noborder"></i></a> </div></div></div> <div class="collapse waverulearea alert alert-primary container-fluid" id="lng2"><div class="row"> <div class="col">WIDTH <br> <input type="range" name="slider-1" id="slider-1" min="40" max="80" value="50"> </div> <div class="col col-auto justify-content-center align-self-center"> <a href="#" class="waveclose"> <i class="fas fa-times-circle noborder"></i></a> </div></div></div> <div data-role="footer" data-position="fixed" role="contentinfo" class="footer"> <div class="row"><div class="swiper-container"> <div class="swiper-wrapper"> <div class="col col-auto swiper-slide text-center ">HEIGHT<br> <a href="#lng1" data-toggle="collapse"><i class="fas fa-ruler-vertical"></i> </a> </div> <div class="col col-auto swiper-slide text-center">WIDTH<br> <a href="#lng2" data-toggle="collapse"><i class="fas fa-ruler-horizontal"></i></a> </div> </div> </div> </div> </div> </div> </div><!-- /page --> <!-- Initialize Swiper --> <script> $(function() { var swiper = new Swiper('.swiper-container', { slidesPerView: 5, spaceBetween: 0, slidesPerGroup:3 , loop: false, loopFillGroupWithBlank: true, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); }); </script> </body> </html>

Related: See More

Paper Kit
Bootstrap 4 Footer Design
Footer using Bootstrap 4
Nth level Poll drill down control

Questions / Comments: