title: Bootsrap table text not wrapping on less width
body: <p>Have probably simple question but can't figure out what's wrong. I am using bootstrap table to show the data. The table is responsive and resizing correctly when the user changes the browser size with only one exception which I can't find the solution to.</p>
  
  <p>Look at the picture I liked to.  There are 3 states:
  1st when looks normally on full browser size
  2nd when user would resize - still ok
  3rd when it's been resized a lot then it messes up</p>
  
  <p>Link:
  <a href="https://www.dropbox.com/s/23pj6w2uu0lz716/fine-fullwith.png?dl=0" rel="nofollow noreferrer">https://www.dropbox.com/s/23pj6w2uu0lz716/fine-fullwith.png?dl=0</a></p>
  
  <p>Counting on your help.</p>
  
  <p>See my code below:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      p {
          /*padding: 5px;*/
          font-size: 13px;
          text-align: center;
          word-wrap:break-word;
      }
  
      .ar {
          height: 50px;
      }
  
      .table tbody &gt; tr &gt; td.vert-align_td {
          vertical-align: middle;
      }
  
      .table thead &gt; tr &gt; th.vert-align_th{
          vertical-align: middle;
      }
  
  &lt;/style&gt;
  
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
       &lt;div class="col-sm-1 col-lg-2"&gt;
      &lt;/div&gt;
  
       &lt;div class="col-sm-11 col-lg-10"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt; 
  
                              &lt;div class="content-wrapper"&gt;&lt;/div&gt;  
  
                              &lt;div class="panel panel-default"&gt;
                                  &lt;div class="panel-heading"&gt;&lt;/div&gt;
                                  &lt;div class="panel-body"&gt;
                                      &lt;div class="table-responsive"&gt;
  
                                          &lt;table class="table table-bordered table-hover" style="word-wrap: break-word;table-layout: fixed;"&gt;
                                              &lt;thead&gt;
                                                  &lt;tr&gt;
                                                      &lt;th class="col-md-3 text-center vert-align_th"&gt;Nazwa transportu&lt;/th&gt;
                                                      &lt;th class="col-md-2 text-center vert-align_th"&gt;Typ transportu&lt;/th&gt;
                                                      &lt;th class="col-md-2 text-center vert-align_th"&gt;Kierowca&lt;/th&gt;
                                                      &lt;th class="col-md-1 text-center vert-align_th"&gt;Numer rejestracyjny&lt;/th&gt;
                                                      &lt;th class="col-md-1 text-center vert-align_th"&gt;Firma spedycyjna&lt;/th&gt;
                                                      &lt;th class="col-md-1 text-center vert-align_th"&gt;Data przyjecia&lt;/th&gt;
                                                      &lt;th class="col-md-1 text-right vert-align_th"&gt;Przycisk&lt;/th&gt;
                                                  &lt;/tr&gt;
                                              &lt;/thead&gt;
                                              &lt;tbody&gt;
                                                  @For Each item In Model
                                                      @&lt;tr&gt;
                                                          @*vert-align - look at top in css section*@
                                                           &lt;td class="col-md-3 text-center vert-align_td"&gt;&lt;a&gt;@item.NazwaTransportu&lt;/a&gt;&lt;/td&gt;
                                                           &lt;td class="col-md-2 text-right vert-align_td"&gt;@item.TypTransportu&lt;/td&gt;
                                                           &lt;td class="col-md-2 text-center vert-align_td"&gt;@item.Kierowca&lt;/td&gt;
                                                           &lt;td class="col-md-1 text-center vert-align_td"&gt;@item.NumerRejestracyjny&lt;/td&gt;
                                                           &lt;td class="col-md-1 text-center vert-align_td"&gt;@item.FirmaSpedycyjna&lt;/td&gt;
                                                           &lt;td class="col-md-1 text-center vert-align_td"&gt;@item.DataPrzyjecia&lt;/td&gt;
                                                           &lt;td class="col-md-1 text-center vert-align_td"&gt;
                                                               &lt;a rel="tooltip" class="btn btn-success btn-xs" href=""&gt;
                                                                   &lt;i class="glyphicon glyphicon-plus icon-color"&gt;&lt;/i&gt;
                                                                   dodaj
                                                               &lt;/a&gt;
                                                           &lt;/td&gt;
                                                      &lt;/tr&gt;
                                                  Next
                                              &lt;/tbody&gt;
                                          &lt;/table&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;
  
  
    [1]: http://i.stack.imgur.com/jrybd.png
  </code></pre>