title: Bootstrap (4) carousel fix width on slide
body: <p>I'm attempting to work on my Bootstrap Carousel and I have the problem when the carousel slides ...</p>
  <p>The carousel starts this way</p>
  <p><img src="https://i.ibb.co/Jz2H12w/Schermata-del-2022-03-29-17-23-12.png" alt="Text" /></p>
  <p>And here when it slides</p>
  <p><img src="https://i.ibb.co/jvzQrvV/Schermata-del-2022-03-29-16-34-44.png" alt="Text" /></p>
  <p>I want to carousel fixed on center without change his width when it slides</p>
  <p>Adding a fixed with to carousel-inner works, but this value is dynamic and depends on the image that is uploaded with a form</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-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('.carousel').carousel()
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#myCarousel {
    margin-left: 50px;
    margin-right: 50px;
    height: 100vh;
  }
  
  .carousel-inner {
    border: 1px solid;
    width: fit-content;
    margin: auto;
  }
  
  .carousel-control {
    width: 0%;
  }
  
  .car,
  car:hover {
    color: #000 !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"&gt;
  
  &lt;div id="myCarousel" class="carousel slide d-flex align-items-center" data-ride="carousel"&gt;
  
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="carousel-item active"&gt;
        &lt;img src="https://via.placeholder.com/600x300" alt="a" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="carousel-item"&gt;
        &lt;img src="https://via.placeholder.com/600x300" alt="b" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="carousel-item"&gt;
        &lt;img src="https://via.placeholder.com/600x300" alt="c" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="carousel-item"&gt;
        &lt;img src="https://via.placeholder.com/600x300" alt="d" class="img-responsive"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Left and right controls --&gt;
  
    &lt;button class="car carousel-control-prev" type="button" data-target="#myCarousel" data-slide="prev"&gt;
      &lt;i class="fas fa-chevron-left fa-2x"&gt;&lt;/i&gt;
    &lt;/button&gt;
    &lt;button class="car carousel-control-next" type="button" data-target="#myCarousel" data-slide="next"&gt;
      &lt;i class="fas fa-chevron-right fa-2x"&gt;&lt;/i&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is jsfiddle <a href="https://jsfiddle.net/FireFoxII/vhLo2g3j/" rel="nofollow noreferrer">https://jsfiddle.net/FireFoxII/vhLo2g3j/</a></p>