title: bootstrap Carousel 100% width
body: <p>Tried many things but just couldnt get it right i want the carousel to strech to screen size without white space on left and right side of the screen .Yes in there may similar posts and i have tried many a things but its not working and please explain why this is happenning </p>
  
  <p><a href="http://jsfiddle.net/cs34g/2/" rel="nofollow"><strong>Demo</strong></a></p>
  
  <h2>HTML</h2>
  
  <p><br>
                                        </p>
  
  <pre><code>                           &lt;div class="col-lg-12  col-md-12 col-sm-12 col-xs-12" &gt;
  
                                    &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
                                            &lt;!-- Indicators --&gt;
                                            &lt;ol class="carousel-indicators"&gt;
                                              &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                                              &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
                                              &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
                                            &lt;/ol&gt;
  
                                            &lt;!-- Wrapper for slides --&gt;
                                            &lt;div class="carousel-inner"&gt;
                                              &lt;div class="item active"&gt;
                                                &lt;img src="http://placehold.it/1024x700/CC1111/FFF" alt="First Slide"&gt;
                                                &lt;div class="carousel-caption"&gt;
                                                First Slide
                                                &lt;/div&gt;
                                              &lt;/div&gt;
                                              &lt;div class="item"&gt;
                                               &lt;img src="http://placehold.it/1024x700/449955/FFF" alt="Second Slide"&gt;
                                                &lt;div class="carousel-caption"&gt;
                                                 Second Slide
                                                &lt;/div&gt;
                                              &lt;/div&gt;
  
                                                  &lt;div class="item"&gt;
                                               &lt;img src="http://placehold.it/1024x700/" alt="Third Slide"&gt;
                                                &lt;div class="carousel-caption"&gt;
                                                 Third Slide
                                                &lt;/div&gt;
                                              &lt;/div&gt;
  
                                            &lt;/div&gt;
  
                                            &lt;!-- Controls --&gt;
                                            &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
                                              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
                                            &lt;/a&gt;
                                            &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
                                              &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
                                            &lt;/a&gt;
                                  &lt;/div&gt;
  
  
  
  
  
                             &lt;/div&gt;
  
                      &lt;/div&gt;
  
  
          &lt;/div&gt;  
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>#Container_Carousel{
  
      margin:0;
      padding:0;
      width:100%;
  
  }
  .item img{
       width:100%; 
  
  
  }
  body{
        margin:0;
      padding:0;
  
  }
  html,body{height:100%;}
  .carousel,.item,.active{height:100%;}
  .carousel-inner{height:100%;}
  </code></pre>