title: Integrate Flickity With Bootstrap 4 Carousel
body: <p>I start using <strong><a href="https://v4-alpha.getbootstrap.com" rel="noreferrer">Bootstrap 4</a></strong> yesterday, and I exploring <a href="http://flickity.metafizzy.co" rel="noreferrer">Flickity</a> last week. Now I just try to integrate Flickity with my Bootstrap 4 using the quick <a href="https://v4-alpha.getbootstrap.com/examples/" rel="noreferrer">Bootrap 4 examples</a> and I'm using the <strong><a href="https://v4-alpha.getbootstrap.com/examples/carousel/" rel="noreferrer">carousel</a></strong>. But when I add the Flickity with the built-in carousel the following has been dis-arranged, mis-aligned or any called with it. <strong>But I want to use the existing designs of the Bootstrap 4 example carousel not even using the Flickity carousel controller  I just need to add Flickity to add touch, reponsive, and flickible carousels.</strong> The following codes I used below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* GLOBAL STYLES
  -------------------------------------------------- */
  
  
  /* Padding below the footer and lighter body text */
  
  body {
    padding-top: 3rem;
    padding-bottom: 3rem;
    color: #5a5a5a;
  }
  
  
  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */
  
  
  /* Carousel base class */
  
  .carousel {
    margin-bottom: 4rem;
  }
  
  
  /* Since positioning the image, we need to help out the caption */
  
  .carousel-caption {
    z-index: 10;
    bottom: 3rem;
  }
  
  
  /* Declare heights because of positioning of img element */
  
  .carousel-item {
    height: 32rem;
    background-color: #777;
  }
  
  .carousel-item&gt;img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 32rem;
  }
  
  
  /* MARKETING CONTENT
  -------------------------------------------------- */
  
  
  /* Center align the text within the three columns below the carousel */
  
  .marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .marketing h2 {
    font-weight: normal;
  }
  
  .marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
  }
  
  
  /* Featurettes
  ------------------------- */
  
  .featurette-divider {
    margin: 5rem 0;
    /* Space out the Bootstrap &lt;hr&gt; more */
  }
  
  
  /* Thin out the marketing headings */
  
  .featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.05rem;
  }
  
  
  /* RESPONSIVE CSS
  -------------------------------------------------- */
  
  @media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
      margin-bottom: 1.25rem;
      font-size: 1.25rem;
      line-height: 1.4;
    }
    .featurette-heading {
      font-size: 50px;
    }
  }
  
  @media (min-width: 62em) {
    .featurette-heading {
      margin-top: 7rem;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" /&gt;
  
  
  &lt;nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"&gt;
    &lt;button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
    &lt;a class="navbar-brand" href="#"&gt;Carousel&lt;/a&gt;
    &lt;div class="collapse navbar-collapse" id="navbarCollapse"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;form class="form-inline mt-2 mt-md-0"&gt;
        &lt;input class="form-control mr-sm-2" type="text" placeholder="Search"&gt;
        &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class="carousel-inner" role="listbox" data-flickity='{ "autoPlay": true }'&gt;
      &lt;div class="carousel-item active"&gt;
        &lt;img class="first-slide" src="https://images.pexels.com/photos/382686/pexels-photo-382686.jpeg?w=940&amp;h=650&amp;auto=compress&amp;cs=tinysrgb" alt="First slide" style="height: 100%"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption d-none d-md-block text-left"&gt;
            &lt;h1&gt;Example headline.&lt;/h1&gt;
            &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;Sign up today&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img class="second-slide" src="https://static.pexels.com/photos/249023/pexels-photo-249023.jpeg" alt="Second slide"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption d-none d-md-block"&gt;
            &lt;h1&gt;Another example headline.&lt;/h1&gt;
            &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;Learn more&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img class="third-slide" src="https://images.pexels.com/photos/362690/pexels-photo-362690.jpeg?w=940&amp;h=650&amp;auto=compress&amp;cs=tinysrgb" alt="Third slide"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption d-none d-md-block text-right"&gt;
            &lt;h1&gt;One more for good measure.&lt;/h1&gt;
            &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;Browse gallery&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"&gt;
      &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"&gt;
      &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;</code></pre>
  </div>
  </div>
  </p>