css - HTML -Card text not wrapping -

i created html card following tutorial. added page (which uses bootstrap 3.0). however, text not wrappering in tutorial. know why or how fix this?

picture

https://i.stack.imgur.com/cd9dy.png

html snippet

        <div class="row">             <div class="col-lg-2">                 <div class="form-group ">                     <card [visable]="obj.one" [width]="100" [image]="obj.two" [header]="project.manager?.name" [content]="obj.four"></card>                 </div>             </div>             <div class="col-lg-3">                 <div class="form-group">                     <label class="control-label ">                         project name                     </label>                     <div class="input-group">                         <input class="form-control" type="text" [value]="project.name" />                     </div>                 </div>                 <div class="form-group">                     <label class="control-label ">                         project number                     </label>                     <div class="input-group">                         <input class="form-control" type="text" />                     </div>                 </div>                 <div class="form-group">                     <label class="control-label ">                         project creator                     </label>                 </div>             </div>             <div class="col-lg-3">                 <div class="form-group">                     <label class="control-label ">                         team                     </label>                     <div class="input-group">                         <input class="form-control" type="text" />                     </div>                 </div>                 <div class="form-group">                     <label class="control-label ">                         team id                     </label>                     <div class="input-group">                         <input class="form-control" type="text" />                     </div>                 </div>                 <div class="form-group">                     <label class="control-label ">                         team manager                     </label>                 </div>             </div>             <div class="col-lg-3">                 <div>                     <div class="card" style="width: 100%;">                         <div class="container">                             <h4><b>project details</b></h4>                             <p >one team of students collected data                                 consumer internet website automobile specificatins.the summary slide shows                 results of linear regression analysis on car engine horsepower , average miles per gallon (mpg) ratings</p>                         </div>                     </div>                 </div>             </div>         </div> 

css

.card {     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);     transition: 0.3s; }  .card:hover {     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); }  .container {     padding: 2px 16px; } 

bootstrap container conflicting with "tutorial" container.

use special container class card...

<div class="col-lg-3">       <div>             <div class="card" style="width: 100%;">                   <div class="card-container">                         ..                   </div>             </div>       </div> </div>  .card-container {     padding: 2px 16px; }