CODEWITHSUNDEEP
jquerytwitter-bootstrap
Mageshkumar Rajendiran
Mageshkumar Rajendiran

Reputation: 1

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 the code im using for responsiveness now my client want in mobile this should work as tab. kindly help me to sort this out.

Upvotes: 0

Views: 1100

Answers (2)

Rob
Rob

Reputation: 83

Here is a solution using bootstrap 4 classes only:

    <ul class="nav nav-tabs d-sm-none">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#a">Panel A</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#b">Panel B</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#c">Panel C</a></li>
    </ul>
    <div class="tab-content d-flex">
        <div id="a" class="flex-grow-1 d-sm-block tab-pane active bg-primary">
            <div>content Panel A</div>
            <div>content Panel A</div>
            <div>content Panel A</div>
            <div>content Panel A</div>
        </div>
        <div id="b" class="flex-grow-1 d-sm-block tab-pane bg-secondary">
            <div>content Panel B</div>
            <div>content Panel B</div>
            <div>content Panel B</div>
            <div>content Panel B</div>
        </div>
        <div id="c" class="flex-grow-1 d-sm-block tab-pane bg-success">
            <div>content Panel C</div>
            <div>content Panel C</div>
            <div>content Panel C</div>
            <div>content Panel C</div>
        </div>
    </div>

Upvotes: 1

Mageshkumar Rajendiran
Mageshkumar Rajendiran

Reputation: 1

Thanks to all i got the solution with out using extra 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 only screen and (min-width : 768px) {
            .device-big, .tab-content > .tab-pane {
            display: block;
            }
            .device-small {
            display: none;
            }
            .tab-content > .tab-pane {
                display: block;
            }
        }
        /* --------------- / Responsive Fixes --------------- */

Upvotes: 0

Related Questions