title: Bootstrap resize webpage image goes out of column
body: <p>I have three columns on my webpage. two images within the middle column. This is all done by bootstrap and when I resize the page (make it smaller) the image goes outside of the middle column. It is only when the images hit the edge of the web browser the image resize or relocates. Does anyone know why it is doing this? It is a asp.net web forms website. The master page already has 3 columns all set up and working I am simply putting the image inside the contend placeholder which is in the middle column. </p>
  
  <p>this is the part of of code where I put in the image.</p>
  
  <pre><code>&lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
           &lt;div class="col-xs-12 col-sm-6 col-md-7"&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="images/Ad1.jpg" class="img-responsive" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="col-xs-6 col-md-5"&gt;
              &lt;div id="adRotator" class="carousel slide"&gt;
                  &lt;div class="carousel-inner"&gt;
                      &lt;div class="item active"&gt;
                          &lt;img src="images/Ad2.jpg" class="img-responsive" /&gt;
                          &lt;div class="container"&gt;
                              &lt;div class="carousel-caption"&gt;
                                  &lt;h1&gt;Ad rotator&lt;/h1&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>