Can't get the "fade in" to work with tabs in bootstrap -
so have simple tabs panel in html page , have applied "fade in" class active tab , "fade" others. far can see, have scripts installed ok, markup looks should according bootstrap website , other articles i've seen on web including here. yet still doesn't fade in or fade between tabs.
can see 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 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 development matrix</h1> <p>a unique training , development proposition brings best people, ideas , solutions. partnering development matrix gives access network of training , development , commercially experienced professionals, on own highly skilled when connected become single element committed delivering best results 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 , 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 css
.body-content-wrapper .tab-pane { padding: 20px 25px 15px 25px; border: 1px solid #e5e4e3; border-top:0; } .tab-wrapper .nav-tabs li { display: block; padding: 10px 20px; border: 1px solid #e5e4e3; border-bottom:#fff; } .tab-wrapper .nav-tabs li { background:#a0cc37; color:#fff; } .tab-wrapper .nav-tabs li a:hover { color:#3e4440; background:#ccc; } .tab-wrapper .nav-tabs > .active > { background:#fff; color:#3e4440; border-bottom:#fff solid 1px; } i have tried writing various different ways , going basics pasting example bootstrap website, nothing changes. it's still same.
Comments
Post a Comment