All tab-pane showing at first load (Bootstrap)

Question

I'm developing a Web page and I'm actually using Bootstrap and the class tab-pane.

Unfortunately I've got an issue where, when I open my page every pane are showing one under the other. Then when I do a single switch between pane, everything is coming back to straight.

I'm developing with Laravel; I dont think there is a relation but maybe is it beacause of this ?

My HTML :

   <div id="cruise-features" class="tab-container">
   <ul class="tabs">
      <li class="active"><a href="#cruise-description" data-toggle="tab">Description</a></li>
      <li><a href="#cruise-availability" data-toggle="tab">Availability</a></li>
      <li><a href="#cruise-amenities" data-toggle="tab">Amenities</a></li>
      <li><a href="#cruise-food-dinning" data-toggle="tab">Food &amp; Dinning</a></li>
      <li><a href="#cruise-reviews" data-toggle="tab">Reviews</a></li>
      <li><a href="#cruise-write-review" data-toggle="tab">Write a Review</a></li>
  </ul>
  <div class="tab-content">
       @include('common.description_product')
       @include('common.availability_product')
       <div class="tab-pane fade" id="cruise-amenities">
          ...
       </div>
       @include('common.dinning_product')
       @include('common.reviews_product')
       @include('common.write_review_product')
 </div>

An example of what is happening :

An example of what should happening :

Note the difference under the meteo segment.

Have you guys any idea of why is it happening ?

Answer 1

Thank's to @Leandro Soares I have my answer =)

I had more than once the class active in on my tab.