"BoradBand Plans (Tabular View)"
Bootstrap 3.3.0 Snippet by abhijeetka

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <h2>BroadBand Plans</h2> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#DaualSpeed">Dual Speed</a></li> <li><a data-toggle="tab" href="#UnlimatedPlans">Unlimated Plans</a></li> <li><a data-toggle="tab" href="#DayNightPlan">Day /Night Plans</a></li> <li><a data-toggle="tab" href="#MBPlans">MB Plans</a></li> </ul> <div class="tab-content"> <div id="DaualSpeed" class="tab-pane fade in active"> <ul class="nav nav1 nav-tabs nav-tabs12 nav-stacked col-md-3"> <li class="active"><a data-toggle="tab" href="#D100mbps">100 Mbps</a></li> <li><a data-toggle="tab" href="#D50mbps">50 Mbps</a></li> <li><a data-toggle="tab" href="#D20mbps">20 Mbps</a></li> <li><a data-toggle="tab" href="#D15mbps">15 Mbps</a></li> <li><a data-toggle="tab" href="#D10mbps">10 Mbps</a></li> </ul> <div class="tab-content col-md-9"> <div id="D100mbps" class="tab-pane fade in active"> <br> <input type="button" value="YOU WTF 100" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> <td>1 Mth</td> <td>3 Mth</td> <td>3 Mth</td> <td>6 Mth</td> <td>12 Mth</td> </tr> <tr> <th>Data Usage</th> <td>250 GB</td> <td>450 GB</td> <td>800 GB</td> <td>1700 GB</td> <td>3500 GB</td> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 100 Mbps</th> </tr> <tr> <th>Plans Charges</th> <td>1740/-</td> <td>4605/-</td> <td>5219</td> <td>10438</td> <td>20867</td> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="D50mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 50" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> <td>1 Mth</td> <td>1 Mth</td> <td>3 Mth</td> <td>3 Mth</td> <td>6 Mth</td> </tr> <tr> <th>Data Usage</th> <td>400 GB</td> <td>5000 GB</td> <td>400 GB</td> <td>3500 GB</td> <td>400 GB</td> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 50 Mbps</th> </tr> <tr> <th>Plans Charges</th> <td>1500</td> <td>1500</td> <td>1500</td> <td>1500</td> <td>1500</td> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="D20mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 20" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 20 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="D15mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 15" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 15 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="D10mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 15" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 10 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> </div> </div> <div id="UnlimatedPlans" class="tab-pane fade"> <ul class="nav nav1 nav-tabs nav-tabs12 nav-stacked col-md-3"> <li class="active"><a data-toggle="tab" href="#U100mbps">100 Mbps</a></li> <li><a data-toggle="tab" href="#U50mbps">50 Mbps</a></li> <li><a data-toggle="tab" href="#U20mbps">20 Mbps</a></li> <li><a data-toggle="tab" href="#U15mbps">15 Mbps</a></li> <li><a data-toggle="tab" href="#U10mbps">10 Mbps</a></li> </ul> <div class="tab-content col-md-9"> <div id="U100mbps" class="tab-pane fade in active"> <br> <input type="button" value="YOU WTF 100" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 100 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="U50mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 50" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 50 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="U20mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 20" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 20 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="U15mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 15" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 15 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="U10mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 15" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 10 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> </div> </div> <div id="DayNightPlan" class="tab-pane fade"> <ul class="nav nav1 nav-tabs nav-tabs12 nav-stacked col-md-3"> <li class="active"><a data-toggle="tab" href="#DN100mbps">100 Mbps</a></li> <li><a data-toggle="tab" href="#DN50mbps">50 Mbps</a></li> <li><a data-toggle="tab" href="#DN20mbps">20 Mbps</a></li> <li><a data-toggle="tab" href="#DN15mbps">15 Mbps</a></li> <li><a data-toggle="tab" href="#DN10mbps">10 Mbps</a></li> </ul> <div class="tab-content col-md-9"> <div id="DN100mbps" class="tab-pane fade in active"> <br> <input type="button" value="YOU WTF 100" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> <td>monthly</td> </tr> <tr> <th>Data Usage</th> <td>10 GB</td> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 100 Mbps</th> </tr> <tr> <th>Plans Charges</th> <td>plan_charges</td> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="DN50mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 50" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 50 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="DN20mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 20" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 20 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="DN15mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 15" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 15 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="DN10mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 15" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 10 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> </div> </div> <div id="MBPlans" class="tab-pane fade"> <ul class="nav nav1 nav-tabs nav-tabs12 nav-stacked col-md-3"> <li class="active"><a data-toggle="tab" href="#NB100mbps">100 Mbps</a></li> <li><a data-toggle="tab" href="#NB50mbps">50 Mbps</a></li> <li><a data-toggle="tab" href="#NB20mbps">20 Mbps</a></li> <li><a data-toggle="tab" href="#NB15mbps">15 Mbps</a></li> <li><a data-toggle="tab" href="#NB10mbps">10 Mbps</a></li> </ul> <div class="tab-content col-md-9"> <div id="NB100mbps" class="tab-pane fade in active"> <br> <input type="button" value="YOU WTF 100" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> <td>1 Mth</td> </tr> <tr> <th>Data Usage</th> <td>125 GB</td> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 100 Mbps</th> </tr> <tr> <th>Plans Charges</th> <td>plan_charges</td> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="NB50mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 50" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 50 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="NB20mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 20" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 20 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="NB15mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 15" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> </tr> <tr> <th>Data Usage</th> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 15 Mbps</th> </tr> <tr> <th>Plans Charges</th> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> <div id="NB10mbps" class="tab-pane fade"> <br> <input type="button" value="YOU WTF 15" class="btn btn-primary"> <br> <br> <div class="table-responsive" style="border: 1px solid #98a198;"> <table class="table table-bordered"> <tr> <th>Validity</th> <td>30 days</td> </tr> <tr> <th>Data Usage</th> <td>200 GB</td> </tr> <tr> <th colspan="8" align="center" style="text-align:center;">Speed Upto 10 Mbps</th> </tr> <tr> <th>Plans Charges</th> <td>plan_charges</td> </tr> </table> <p style="font-weight:bold; color:#000000;" align="center">After free data usage, you can still download @ Upto 1 Mbps</p> <p align="center"><span class="test-danger">"Plan availably is subject to newtwork feasibility."</span></p> <br> <ul style="color:red; padding-left:20px;list-style-type: circle;"> <li>1,2 month plan installation charges extra <strong>Rs,650</strong></li> <li>3,4 month plan installation charges extra <strong>Rs,350</strong></li> </ul> </div> </div> </div> </div>

Related: See More


Questions / Comments: