Change height of bootstrap carousel - keeping it responsive
<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>