title: Bootstrap: Text is outside list-group-item box
body: <p>So I'm making a movie website to practice some skills. On the front page there is a movie with some of its reviews displayed. Unfortunately when the review is too long it breaks through the box's borders instead of starting on a new line. Does anyone know how to fix this?</p>
  
  <p><a href="https://i.stack.imgur.com/QW9Kg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QW9Kg.png" alt="enter image description here"></a></p>
  
  <p><strong>my template code (angular)</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="container col-md-12"&gt;
      &lt;h3&gt;Cinema&lt;/h3&gt;
      &lt;hr&gt;
      &lt;div class="col col-md-5"&gt;
          &lt;img [src]="movie?.pictureUrl" class="img-responsive" alt="hello"&gt;
      &lt;/div&gt;
      &lt;div class="col col-md-7 "&gt;
          &lt;a [routerLink]="['movies', movie?._id]"&gt;&lt;h1&gt;{{movie?.title}} ({{movie?.year}})&lt;/h1&gt;&lt;/a&gt;
          &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;&lt;span&gt;&lt;h1 class="averageRating"&gt;{{movie?.averageRating}}&lt;/h1&gt;&lt;/span&gt;&lt;br&gt;
          &lt;ul class="list-group"&gt;
              &lt;li class="list-group-item review" *ngFor="let review of movie?.reviews"&gt;
                  &lt;p class="review-content"&gt;{{review.user.firstName}} {{review.user.lastName}} &lt;b&gt;|&lt;/b&gt; {{review.content}}&lt;/p&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;div class="container col-md-8 col-md-offset-2"&gt;
          &lt;hr&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>