Image is not responsive inside carousel using ng2-bootstrap

Question

Anybody know why is the image inside first carousel not responsive? And how to make it responsive like the second one (Normal Bootstrap version) below. First one was created using ng2-bootstrap

Here is the html I have:

<h1>ng2-bootstrap carousel</h1>
<carousel>
    <slide>
        <img class="first-slide" src="http://placehold.it/800x400" alt="First slide" class="center-block">
        <div class="container">
            <div class="carousel-caption">
                <h1>Example headline.</h1>
                <p>Descr1</p>
                <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
            </div>
        </div>
    </slide>
    <slide>
        <img class="second-slide" src="http://placehold.it/800x400" alt="Second slide" class="center-block">
        <div class="container">
            <div class="carousel-caption">
                <h1>Another example headline.</h1>
                <p>Descr2.</p>
                <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
        </div>
    </slide>
</carousel>

<h1>Normal Bootstrap carousel</h1>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://placehold.it/800x400" alt="...">
          <div class="carousel-caption">
            <h2>Heading</h2>
          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/800x400" alt="...">
          <div class="carousel-caption">
            <h2>Heading</h2>
          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/800x400" alt="...">
          <div class="carousel-caption">
            <h2>Heading</h2>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>

Answer 1

Turns out, bootstrap hierarchy gets broken with ng2's tags in-between. adding img-responsive class to the <img ..> resolved the issue.

Only For the sake of completeness:

<h1>ng2-bootstrap carousel</h1>
<carousel>
    <slide>
        <img class="first-slide" src="http://placehold.it/800x400" alt="First slide" class="center-block img-responsive">
        <div class="container">
            <div class="carousel-caption">
                <h1>Example headline.</h1>
                <p>Descr1</p>
                <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
            </div>
        </div>
    </slide>
    <slide>
        <img class="second-slide" src="http://placehold.it/800x400" alt="Second slide" class="center-block img-responsive">
        <div class="container">
            <div class="carousel-caption">
                <h1>Another example headline.</h1>
                <p>Descr2.</p>
                <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
        </div>
    </slide>
</carousel>