title: Center responsive bootstrap carousel
body: <p>I'm trying to fully customize a bootstrap carousel. I need to have it on the sidebar with the indicators at the bottom(outside the carousel). So far I was I able to make it work on large screens, but on smaller screens, the carousel refuse to be centered in the middle. Is there is a way to keep it centered (without using margin)? Thanks in advance</p>
  
  <p>The current result:
  <a href="https://i.stack.imgur.com/SmXuh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SmXuh.png" alt="enter image description here"></a>
  The HTML of the element in question:</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>.other-articles {
    padding: 1.2rem;
  }
  
  .other-articles&gt;h3 {
    font-size: .8rem;
  }
  
  .others {
    padding: 1.2rem;
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
  }
  
  .other-places {
    margin-top: 1.5rem;
  }
  
  .flex-other-articles {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .item-other-articles {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(162, 163, 163, 0.344);
    margin-top: .2rem;
  }
  
  .last-it-oth {
    border-bottom: none !important;
  }
  
  .item-other-articles img {
    border-radius: 3px;
    margin-top: -.7rem;
    height: 50px;
    width: 56px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  
  .item-other-articles-txt {
    margin-left: .7rem;
  }
  
  .item-other-articles-txt&gt;h6 {
    font-size: .7rem;
  }
  
  .item-other-articles-txt&gt;p {
    font-size: .6rem;
  }
  
  @media (max-width:965px) and (min-width:780px) {
    .other-articles {
      text-align: center;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
  &lt;div class="others block"&gt;
    &lt;h6&gt;OTHER PLACE&lt;/h6&gt;
    &lt;div class="other-place-dots"&gt;
      &lt;i class="fas fa-circle"&gt;&lt;/i&gt;
      &lt;i class="fas fa-circle"&gt;&lt;/i&gt;
      &lt;i class="fas fa-circle"&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;div class="the-mini-slider-on-the-sidebar container-fluid"&gt;
      &lt;div id="carouselExample" class="carousel slide" data-ride="carousel"&gt;
        &lt;div class="carousel-inner mini-carousel-img"&gt;
          &lt;div class="carousel-item"&gt;
            &lt;img class="d-block w-100 " src="https://i.imgur.com/lCcKhji.jpg" alt="First slide"&gt;
            &lt;div class="carousel-caption d-none d-md-block cap-1-black"&gt;
              &lt;div class="carr-text-img"&gt;
                &lt;h5&gt;Ski Lifts&lt;/h5&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
            &lt;img class="d-block w-100" src="https://i.imgur.com/lCcKhji.jpg" alt="Second slide"&gt;
            &lt;div class="carousel-caption d-none d-md-block cap-1-black"&gt;
              &lt;div class="carr-text-img"&gt;
                &lt;h5&gt;Ski Lifts&lt;/h5&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item active"&gt;
            &lt;img class="d-block w-100" src="https://i.imgur.com/lCcKhji.jpg" alt="Third slide"&gt;
            &lt;div class="carousel-caption d-none d-md-block cap-1-black"&gt;
              &lt;div class="carr-text-img"&gt;
                &lt;h5&gt;Ski Lifts&lt;/h5&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" 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;div class="carousel slide carousel-in-li" data-ride="carousel"&gt;
          &lt;ol class="carousel-indicators carousel-in-1"&gt;
            &lt;li data-target="#carouselExample" data-slide-to="0" class=""&gt;&lt;/li&gt;
            &lt;li data-target="#carouselExample" data-slide-to="1" class=""&gt;&lt;/li&gt;
            &lt;li data-target="#carouselExample" data-slide-to="2" class="active"&gt;&lt;/li&gt;
          &lt;/ol&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>