title: twitter-bootstrap center carousel image reguardless of screen size
body: <p>I have the following desires for a twitter bootstrap carousel:</p>
  
  <ol>
  <li>When screen is bigger then carousel, I want the image centered.</li>
  <li>When the screen is smaller than the carousel, I want to see just PART of the image. This part of the image should be centered.</li>
  <li>At no point should the images be resized or scaled</li>
  <li>The transitions should work.</li>
  </ol>
  
  <p>My example below fixed problems 1-3.. but it breaks 4.  I can easily fix 4 if I am willing to break 3, but that is no good.</p>
  
  <p>Bootply link to example: <a href="http://bootply.com/88542">http://bootply.com/88542</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- Carousel
  ================================================== --&gt;
  &lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;!-- Indicators --&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;/ol&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="http://lorempixel.com/1200/600/abstract/1" height="600px" width="1200px"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Bootstrap 3 Carousel Layout&lt;/h1&gt;
            &lt;pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.&lt;="" small=""&gt;&lt;p&gt;&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="http://getbootstrap.com"&gt;Learn More&lt;/a&gt;
          &lt;/p&gt;&lt;/pthis&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="http://lorempixel.com/1200/600/abstract/2" height="600px" width="1200px"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Changes to the Grid&lt;/h1&gt;
            &lt;p&gt;Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-large btn-primary" href="#"&gt;Learn more&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/1200X600" height="600px" width="1200px"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Percentage-based sizing&lt;/h1&gt;
            &lt;p&gt;With "mobile-first" there is now only one percentage-based grid.&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-large btn-primary" href="#"&gt;Browse gallery&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Controls --&gt;
    &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
      &lt;span class="icon-prev"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
      &lt;span class="icon-next"&gt;&lt;/span&gt;
    &lt;/a&gt;  
  &lt;/div&gt;
  &lt;!-- /.carousel --&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* BOOTSTRAP 3.x GLOBAL STYLES
  -------------------------------------------------- */
  body {
    padding-bottom: 40px;
    color: #5a5a5a;
  }
  
  
  
  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */
  
  /* Carousel base class */
  .carousel {
    margin-bottom: 60px;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  .carousel .item {
    height: 600px;
    width: 1200px;
    background-color:#bbb;
    left: 50%;
    margin-left: -600px;
  }
  .carousel img {
    position: absolute;
    top: 0;
  }
  
  
  
  /* RESPONSIVE CSS
  -------------------------------------------------- */
  
  @media (min-width: 768px) {
  
    /* Remve the edge padding needed for mobile */
    .marketing {
      padding-left: 0;
      padding-right: 0;
    }
  
    /* Navbar positioning foo */
    .navbar-wrapper {
      margin-top: 20px;
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
    }
    /* The navbar becomes detached from the top, so we round the corners */
    .navbar-wrapper .navbar {
      border-radius: 4px;
    }
  
    /* Bump up size of carousel content */
    .carousel-caption p {
      margin-bottom: 20px;
      font-size: 21px;
      line-height: 1.4;
    }
  
  }
  </code></pre>