Mobile touch

Bootstrap mobile touch gestures

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap mobile gestures are touch-based interactions with mobile devices. Various different fingers movements indicate particular component responses.

MDB provides you with support for the most common touch gestures.

Swipe gesture

Carousel with gestures support

Mobile - Material Design for Bootstrap

The Bootstrap allows to use touch support. It is setting to true by default.

If you want more information about carousel, please see our documentation.

Click on the button below to launch a live example and see the Carousel with gestures support in action.

Live preview
Edit in sandbox 
        
            

      <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="w-100 d-block" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).webp">
          </div>
          <div class="carousel-item">
            <img class="w-100 d-block" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).webp">
          </div>
          <div class="carousel-item">
            <img class="w-100 d-block" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).webp">
          </div>
        </div>
      </div>

    
        
    
        
            
      $('.carousel').carousel({
        touch: true // default
      })

Here is an example with touch support setting to false. Touch support will not work with that.

Live preview
Edit in sandbox 
        
            

      <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="w-100 d-block" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).webp">
          </div>
          <div class="carousel-item">
            <img class="w-100 d-block" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).webp">
          </div>
          <div class="carousel-item">
            <img class="w-100 d-block" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).webp">
          </div>
        </div>
      </div>

    
        
    
        
            
      $('.carousel').carousel({
        touch:false
      })