title: how can i fix bootstrap carousel dimensions?
body: <p>this is the carousel i am working on.
  <img src="https://i.stack.imgur.com/COg2Q.png" alt="enter image description here"></p>
  
  <p>the container for this carousel is 7 bootstrap columns wide.
  how can i fix this carousel to fit in the full width of the container irrespective of the image width, the image is image-responsive.</p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-7 slider t"&gt;
  &lt;div id="myCarousel" class="carousel slide"&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="1.jpg" alt="img-responsive"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h1 class=""&gt;some heading&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="2.jpg" alt="img-responsive"&gt;
              &lt;div class="carousel-caption"&gt;
              &lt;h2&gt;main heading&lt;/h2&gt;
              &lt;/div&gt;          
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="3.jpg" alt="img-responsive"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h2&gt;some heading&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>