title: Change height of bootstrap carousel - keeping it responsive
body: <p>I have implemented a bootstrap carousel without overriding any styles. I want it to respond the way it does at the moment, so carousel and image respond down together without the image being cropped or distorted - but I would like the starting height of the carousel to be shorter. </p>
  
  <p>It responds like the one on this page:
  <a href="http://www.suug.co.uk/" rel="nofollow">http://www.suug.co.uk/</a></p>
  
  <p>So at the moment when the browser is full width it is 650px high, I can see a height attribute hasn't been set, so I am wondering if I can keep the way it responds but change the starting height to say, 550px.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="carousel slide" id="bannerFrontPage"&gt;
  
          &lt;div class="carousel-inner"&gt;
              &lt;div class="item"&gt;&lt;a href=""&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;a href=""&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;a href=""&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;a class="left carousel-control" data-slide="prev" href="#bannerFrontPage"&gt;&lt;span class="sr-only"&gt;Previous&lt;/span&gt;&lt;/a&gt; 
          &lt;a class="right carousel-control" data-slide="next" href="#bannerFrontPage"&gt; &lt;span class="sr-only"&gt;Next&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>