jquery - Convert bootstrap colums to tab in mobile view -
<div class="container-fluid"> <div class="row"> <div class="col-md-8 tab1"> <div class="title">content</div> <div>content1 content2</div> </div> <div class="col-md-4 tab2"> <div class="title">user</div> <div>user1 user2</div> </div> </div> </div>
this code im using responsiveness client want in mobile should work tab. kindly me sort out.
thanks got solution out using js,
<div class="container"> <!-- nav tabs --> <ul class="nav nav-tabs device-small" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">messages</a></li> </ul> <!-- tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active col col-xs-12 col-sm-4" id="home">...home...</div> <div role="tabpanel" class="tab-pane col-xs-12 col-sm-4" id="profile">...profile...</div> <div role="tabpanel" class="tab-pane col-xs-12 col-sm-4" id="messages">...messages...</div> </div> </div>
style is
/* --------------- responsive fixes --------------- */ /* small device */ @media (max-width: 767px) { .device-big { display: none; } .device-small { display: block; } } /* big device */ @media screen , (min-width : 768px) { .device-big, .tab-content > .tab-pane { display: block; } .device-small { display: none; } .tab-content > .tab-pane { display: block; } } /* --------------- / responsive fixes --------------- */
Comments
Post a Comment