So i have a simple tabs panel in a html page and I have applied the "fade in" class to the active tab and "fade" to the others. As far as I can see, I have my scripts installed ok, the markup looks like it should according to the bootstrap website and other articles I've seen on the web including here. Yet it still doesn't fade in or fade between tabs.
Can anyone see what I am doing wrong please.
<div class="tab-wrapper">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">About Us</a></li>
<li><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">What we do</a></li>
<li><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Our Team</a></li>
<li><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Latest Projects</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<div class="row">
<div class="col-md-7">
<h1 class="emphasise">About The Development Matrix</h1>
<p>A unique training and development proposition that brings together the very best people, ideas and solutions. Partnering with The Development Matrix gives you access to a network of training and development and commercially experienced professionals, that on their own are highly skilled but when connected become a single element committed to delivering the very best results for your business.</p>
<p>Specialist areas are:</p>
<ul class="list-unstyled">
<li><i class="fa fa-check-square"></i> Leadership</li>
<li><i class="fa fa-check-square"></i> Coaching</li>
<li><i class="fa fa-check-square"></i> Team Development</li>
<li><i class="fa fa-check-square"></i> Graduate and Talent Development</li>
<li><i class="fa fa-check-square"></i> Organisational Development</li>
</ul>
<a href="#" class="btn btn-success btn-lg" role="button">Read More »</a>
</div>
<div class="col-md-5">
<a href="#"><img src="img/latest-projects/gallery.gif" alt=""></a>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile">
<div class="row">
<div class="col-md-3">
<article>
<h1>Graduates</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<h1>Leadership</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<h1>Coaching</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<h1>Assessment</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
</div>
<div class="row">
<div class="col-md-3">
<article>
<h1>Graduates</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<h1>Leadership</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<h1>Coaching</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<h1>Assessment</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
</div>
</div>
<div class="tab-pane fade" id="messages">
<div class="row">
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Clive Bradley</p>
<p class="team-title">Managing Director</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Andy Hughes</p>
<p class="team-title">Leadership & Coaching Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Sue Smith</p>
<p class="team-title">Management Development & Coaching Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Hilary Pearl</p>
<p class="team-title">Organisational Development Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Anita Wild</p>
<p class="team-title">Accreditation & Qualification Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Hilary Wilson</p>
<p class="team-title">Coaching Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Kitt Rudd</p>
<p class="team-title">Team Development Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Andrea Lewis</p>
<p class="team-title">Graduate Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
</ul>
</div>
</div>
<div class="tab-pane fade" id="settings">
<div class="row">
<div class="col-md-3">
<article>
<a href="#"><img src="img/latest-projects/gallery.gif" alt=""></a>
<h1>Graduates</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<a href="#"><img src="img/latest-projects/gallery.gif" alt=""></a>
<h1>Leadership</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<a href="#"><img src="img/latest-projects/gallery.gif" alt=""></a>
<h1>Coaching</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<a href="#"><img src="img/latest-projects/gallery.gif" alt=""></a>
<h1>Assessment</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
and this is the css
.body-content-wrapper .tab-pane {
padding: 20px 25px 15px 25px;
border: 1px solid #E5E4E3;
border-top:0;
}
.tab-wrapper .nav-tabs li a {
display: block;
padding: 10px 20px;
border: 1px solid #E5E4E3;
border-bottom:#fff;
}
.tab-wrapper .nav-tabs li a {
background:#a0cc37;
color:#fff;
}
.tab-wrapper .nav-tabs li a:hover {
color:#3e4440;
background:#ccc;
}
.tab-wrapper .nav-tabs > .active > a {
background:#fff;
color:#3e4440;
border-bottom:#fff solid 1px;
}
I have tried writing it various different ways and going back to basics by just pasting the example from the bootstrap website, but nothing changes. It's still the same.