How do I make bootstrap carousel full width and responsive
<p>How would I make my Bootstrap carousel full width and responsive with HTML and CSS?</p>

<p>Currently it only fill the 12 columns and in the mobile version it's difficult to read the slides.</p>

<p><strong>The Code (<a href="http://www.bootply.com/6BQnZtGFlz" rel="nofollow">http://www.bootply.com/6BQnZtGFlz</a>):</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.content-section-b {
  padding: 50px 0;
  background-color: #3C5A78;
}
.section-heading {
  color: #ffffff;
}
h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: #3C5A78;
  line-height: 1;
  text-align:center;
  padding: 0 0 16px 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content-section-b"&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-12"&gt;
        &lt;h2 class="section-heading"&gt;What Other Clients Are Saying&lt;/h2&gt;
        &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"&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;/ol&gt;
          
          &lt;!-- Wrapper for slides --&gt;
          &lt;div class="carousel-inner" role="listbox"&gt;
            &lt;div class="item active"&gt;
              &lt;img src="http://www.onvia.com/responsive/test_01_02.png" alt="Transit Distrcit and City Purchasing"&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="http://www.onvia.com/responsive/03_04.png" alt="Fire District and County Procurement"&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" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="sr-only"&gt;Previous&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" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="sr-only"&gt;Next&lt;/span&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/div&gt;
&lt;!-- /.content-section--&gt;</code></pre>
</div>
</div>
</p>