title: How to make a fluid image in Bootstrap Carousel
body: <p>How can I make my images "fluid" in Bootstrap and change align to center?</p>
  
  <p>Means that after changing browser resolution images don't fit the carousel borders and don't align.</p>
  
  <pre><code>&lt;div class="carousel-inner" role="listbox" &gt;
  &lt;div class="item active"&gt;
    &lt;img src="img/coffe.jpeg" alt="Coffee" width="460" height="365" a&gt;
  &lt;/div&gt;
  
  &lt;div class="item"&gt;
    &lt;img src="img/sandwich.jpeg" alt="Sandwich"&gt;
  &lt;/div&gt;
  
  &lt;div class="item"&gt;
    &lt;img src="img/wine.jpeg" alt="Wine"&gt;
  &lt;/div&gt;
  
  &lt;div class="item"&gt;
    &lt;img src="img/sandwich.jpeg" alt="Sandwich"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
    &lt;span class="glyphicon glyphicon-chevron-left" 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="#myCarousel" role="button" data-slide="next"&gt;
    &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>