title: Scaling Bootstrap Carousel
body: <p>I am working with bootstrap (new to it), I am trying to create a carousel that takes up about 60% of the page leaving some space at the bottom as well as having it scale correctly when the window is shrunk down to mobile size etc. Right now when the window is resized the carousel gradually disappears then disappears completely when the window is at the smallest size. Here is my code:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="CSS/StyleSheet.css"&gt;
  &lt;link rel="stylesheet" href="Bootstrap/css/bootstrap.css"&gt;
  
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  &lt;!--Navigation bar--&gt;
  
  &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand"&gt;B Media&lt;/a&gt;
      &lt;/div&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li&gt;&lt;a href="#" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Technique&lt;/a&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt; 
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div class="container"&gt;
  &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
  
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
       &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="Images/img1.jpg" alt="Chania" class="CarouselImages"&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="item"&gt;
        &lt;img src="Images/img2.jpg" alt="Flower" class="CarouselImages"&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="Images/img3.jpg" alt="Flower" class="CarouselImages"&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
   
  
  
  
  <p></p>
  
  <p></p>
  
  <p>Any help would be appreciated, also if anyone could tell me why my images load upside down in the browser that would also be a big help. </p>