Bootstrap 4 tabs - first pane not shown on pageload

Question

I have a problem with tabbable panes. When i load the page the first pane keeps empty by pageload. When i switch to the second pane and go back to the first. The content is shown. I cant find the solution, there are no javacript errors but i think that must be a javasript issue. I am using bootstrap 4 alpha 6 and jquery3.1.1. also wow.js, jquery.easing and tether here is my code:

<div class="tabbable-panes">
		  <ul id="clothing-nav" class="nav nav-tabs" role="tablist">
	       <li class="nav-item">
             <a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Button Groups</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab" aria-controls="hats">Button Toolbar</a>
           </li>

           <!-- Dropdown -->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                 Button Dropdown
              </a>
               <div class="dropdown-menu">
                 <a class="dropdown-item" href="#dropdown-combine" role="tab" id="dropdown-combine-tab" data-toggle="tab" aria-controls="dropdownCombine">Combining</a>
                 <a class="dropdown-item" href="#dropdown-split" role="tab" id="dropdown-split-tab" data-toggle="tab" aria-controls="dropdownSplit">Split</a>
               </div>
            </li>
           </ul>
          </div>
          <!-- Content Panel -->
            <div id="clothing-nav-content" class="tab-content">
             <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
               <p>
			   <h5><i class="fa fa-hashtag" aria-hidden="true" ></i> Button Groups Horizontal</h5>
			    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-primary btn-sm">HTML5</button>
                      <button type="button" class="btn btn-primary btn-sm">CSS3</button>
                      <button type="button" class="btn btn-primary btn-sm">SCSS</button>
                </div>
			   </p>
			   <p>
			   <h5><i class="fa fa-hashtag" aria-hidden="true" ></i> Button Groups Vertical</h5>
			    <div class="btn-group-vertical" role="group">
                      <button type="button" class="btn btn-primary btn-sm">HTML5</button>
                      <button type="button" class="btn btn-primary btn-sm">CSS3</button>
                      <button type="button" class="btn btn-primary btn-sm">SCSS</button>
                </div>
			   </p>
			   <p>just add <code>vertical</code>to the btn-group class <code>class="btn-group-vertical"</code></p>
             </div>
             <div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">
               <p>
			    <h5><i class="fa fa-hashtag" aria-hidden="true"></i> Button Toolbar</h5>
				<p>you can combine btn-groups by nest theme into one single - toolbar</p>
                  
				  <table class="table table-sm table-responsive">
                    <thead>
                      <tr>
                       <th>Button Toolbar</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                       <td>
					    <div class="btn-toolbar" role="toolbar">
                         <div class="btn-group" role="group">
                          <button type="button" class="btn btn-primary btn-sm">One</button>
                          <button type="button" class="btn btn-primary btn-sm">One</button>
                          <button type="button" class="btn btn-primary btn-sm">One</button>
                         </div>
                         <div class="btn-group" role="group">
                          <button type="button" class="btn btn-primary btn-sm">Two</button>
                          <button type="button" class="btn btn-primary btn-sm">Two</button>
                         </div>
                        </div>
					   </td>
                      </tr>
                    </tbody>
                   </table>
				   
				 </p>
             </div>
             <div role="tabpanel" class="tab-pane fade" id="dropdown-combine" aria-labelledby="dropdown-combine-tab">
			 <p>
			 <h5><i class="fa fa-hashtag" aria-hidden="true"></i> Button Groups combined with Dropdown</h5>
			 <p>you can nest dropdowns into button groups by using a seperate btn-group inside.</p>
              <p>
			  
			   <table class="table table-sm table-responsive">
                    <thead>
                      <tr>
                       <th>dropdown with btn-groups</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                       <td>
					    <div class="btn-group" role="group">
                          <button type="button" class="btn btn-primary btn-sm">Home</button>
                          <button type="button" class="btn btn-primary btn-sm">Service</button>
                           <div class="btn-group" role="group">
                              <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              About
                              </button>
                           <div class="dropdown-menu" aria-labelledby="about-us">
                             <a class="dropdown-item" href="#">Portfolio</a>
                             <a class="dropdown-item" href="#">Impressum</a>
                             <a class="dropdown-item" href="#">Contact</a>
                           </div>
                          </div>
                        </div>
					   </td>
                      </tr>
                    </tbody>
                   </table>
				   
               </p>
             </div>
             <div role="tabpanel" class="tab-pane fade" id="dropdown-split" aria-labelledby="dropdown-split-tab">
			 <p>
               <h5><i class="fa fa-hashtag" aria-hidden="true"></i> Split Dropdown's</h5>
			 <p>With button groups you can creat a split dropdown-menu</p>
              <p>
			   <table class="table table-sm table-responsive">
                    <thead>
                      <tr>
                       <th>Split Dopdown's</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                       <td>
					    <div class="btn-group">
                          <button type="button" class="btn btn-primary btn-sm">About</button>
                          <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                           <span class="sr-only">Toggle Dropdown</span>
                             </button>
                             <div class="dropdown-menu">
                               <a class="dropdown-item" href="#">Portfolio</a>
                               <a class="dropdown-item" href="#">Impressum</a>
                               <a class="dropdown-item" href="#">Contact</a>
                             </div>
                         </div>
					   </td>
                      </tr>
                    </tbody>
                   </table>
				  </p>
            </div>
           </div>

Answer 1

Don't use h5 and/or <div> inside <p> elements.

Also, remove the fade from the tab-pane as that will prevent display.

http://www.codeply.com/go/zMxKl2Zpq2