title: Why wont Bootstrap 4 carousel allow a form inside a carousel?
body: <p>I am using bootstrap 4, and am implementing a carousel. I have a carousel slide that accepts an email address in a form. However, it seems the carousel is blocking the keyboard from being used. Inside the carousel, I cannot type, only select from the list of autofill email address with my mouse. Here is the basics, unstyled, as you see, you cannot type in the form field. Thank you.</p>
  
  <p><strong>UPDATE</strong> Here is the fiddle: <a href="https://jsfiddle.net/t81zadee/" rel="nofollow">https://jsfiddle.net/t81zadee/</a></p>
  
  <p><strong>UPDATE</strong> Here is the fiddle removing hidden-xs-down because originally I had the carousel hidden on small screens. In reality, I don't plan on using it on small screens so the layout may not be formatted the best, but for debugging, here is the fiddle for small screens: <a href="https://jsfiddle.net/t81zadee/9/" rel="nofollow">https://jsfiddle.net/t81zadee/9/</a></p>
  
  <p><strong>UPDATE</strong> The carousel is set to pause on hoover, so having enough time to type in the field should not be a problem. As long as you don't leave the panel, it won't keep sliding. I know it's not the most ideal layout, but I still need to figure it out. I just don't understand why the carousel would block keyboard use. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;!-- Required meta tags always come first --&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
          &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
  
          &lt;!-- Bootstrap CSS --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"&gt;
  
          &lt;!-- jQuery first, then Tether, then Bootstrap JS. --&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div class="container-fluid"&gt;
              &lt;div id="carousel-example-generic" class="carousel slide hidden-xs-down" data-ride="carousel"&gt;
                  &lt;ol class="carousel-indicators"&gt;
                      &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                      &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
                      &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
                  &lt;/ol&gt;
                  &lt;div class="carousel-inner" role="listbox"&gt;
                      &lt;div class="carousel-item active"&gt;
                          &lt;div class="container-fluid"&gt;
                              &lt;p&gt;Slide irrelevant to question&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="carousel-item"&gt;
                          &lt;div class="container-fluid p-a-0"&gt;
                              &lt;p&gt;Slide irrelevant to question&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="carousel-item"&gt;
                          &lt;div class="container-fluid "&gt;
                              &lt;br&gt;&lt;h1 class ="text-xs-center"&gt;Signup&amp;nbsp;for&amp;nbsp;our&amp;nbsp;email&amp;nbsp;list&lt;/h1&gt;&lt;br&gt;
                              &lt;div class="row m-a-0"&gt;
                                  &lt;div class="col-xs-12 m-x-auto"&gt;&lt;br&gt;
  
                                      &lt;form&gt;
                                          &lt;div class="col-sm-1"&gt;&lt;/div&gt;
                                          &lt;div class="col-md-8 col-sm-7"&gt;
                                              &lt;label class="sr-only" for="email"&gt;e-mail address&lt;/label&gt;
                                              &lt;input type="email" class="form-control" style="width:100%" id="email" placeholder="e-mail address"&gt;
                                          &lt;/div&gt;
                                          &lt;div class="col-md-2 col-sm-3"&gt;
                                              &lt;button type="submit" class="btn btn-Custom2" style="width:100%"&gt;Subscribe!&lt;/button&gt;
                                          &lt;/div&gt;
                                          &lt;div class="col-sm-1"&gt;&lt;/div&gt;
                                      &lt;/form&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
                      &lt;span class="icon-prev" aria-hidden="true"&gt;&lt;/span&gt;
                      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
                      &lt;span class="icon-next" aria-hidden="true"&gt;&lt;/span&gt;
                      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>Code snippet: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Bootstrap CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"&gt;
  
  &lt;!-- jQuery first, then Tether, then Bootstrap JS. --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;div class="container-fluid"&gt;
    &lt;div id="carousel-example-generic" class="carousel slide hidden-xs-down" data-ride="carousel"&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
        &lt;div class="carousel-item active"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;p&gt;Slide irrelevant to question&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
          &lt;div class="container-fluid p-a-0"&gt;
            &lt;p&gt;Slide irrelevant to question&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
          &lt;div class="container-fluid "&gt;
            &lt;br&gt;
            &lt;h1 class="text-xs-center"&gt;Signup&amp;nbsp;for&amp;nbsp;our&amp;nbsp;email&amp;nbsp;list&lt;/h1&gt;
            &lt;br&gt;
            &lt;div class="row m-a-0"&gt;
              &lt;div class="col-xs-12 m-x-auto"&gt;
                &lt;br&gt;
  
                &lt;form&gt;
                  &lt;div class="col-sm-1"&gt;&lt;/div&gt;
                  &lt;div class="col-md-8 col-sm-7"&gt;
                    &lt;label class="sr-only" for="email"&gt;e-mail address&lt;/label&gt;
                    &lt;input type="email" class="form-control" style="width:100%" id="email" placeholder="e-mail address"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2 col-sm-3"&gt;
                    &lt;button type="submit" class="btn btn-Custom2" style="width:100%"&gt;Subscribe!&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-1"&gt;&lt;/div&gt;
                &lt;/form&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
        &lt;span class="icon-prev" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
        &lt;span class="icon-next" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>