This particular carousel is what I have been working on recently.
The container for this carousel spans 7 bootstrap columns in width. How can I adjust this carousel to fit the full width of the container regardless of the image size, with the image being responsive.
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-7 slider t">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to = "0" class ="active"></li>
<li data-target="#myCarousel" data-slide-to = "1"></li>
<li data-target="#myCarousel" data-slide-to = "2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="1.jpg" alt="img-responsive">
<div class="carousel-caption">
<h1 class="">some heading</h1>
</div>
</div>
<div class="item">
<img src="2.jpg" alt="img-responsive">
<div class="carousel-caption">
<h2>main heading</h2>
</div>
</div>
<div class="item">
<img src="3.jpg" alt="img-responsive">
<div class="carousel-caption">
<h2>some heading</h2>
</div>
</div>
</div>
</div>