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

Popular posts from this blog

java - UnknownEntityTypeException: Unable to locate persister (Hibernate 5.0) -

python - ValueError: empty vocabulary; perhaps the documents only contain stop words -

ubuntu - collect2: fatal error: ld terminated with signal 9 [Killed] -