"comparison nav"
Bootstrap 4.0.0 Snippet by jeevan123456

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <div class="container"> <div class="row"> <div class="col-md-12 "> <!-- Nav pills --> <ul class="nav nav-pills bg-light"> <li class="nav-item"> <a class="nav-link active rounded-0" data-toggle="pill" href="#home">Specifications</a> </li> <li class="nav-item"> <a class="nav-link rounded-0" data-toggle="pill" href="#menu1">Overview</a> </li> <li class="nav-item"> <a class="nav-link rounded-0" data-toggle="pill" href="#menu2">Colors</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane container active" id="home"> <div class="row"> <div class="col-md-12"> <table class="table table-hover table-sm table-bordered"> <tbody> <tr> <th>Length (mm)</th> <td>3785</td> <td><i class="fa fa-times text-danger"></i></td> <td><i class="fa fa-check text-success"></i></td> </tr> <tr> <th>Width (mm) </th> <td>3785</td> <td>3724</td> <td>2457</td> </tr> <tr> <th>Height (mm) </th> <td>3785</td> <td>3724</td> <td>2457</td> </tr> <tr> <th>Seating Capacity (Person) </th> <td>7</td> <td>7</td> <td>5</td> </tr> <tr> <th>Fuel Type </th> <td>7</td> <td>7</td> <td>5</td> </tr> <tr> <th>Max Power (bhp@rpm) </th> <td>212 @ 6200 </td> <td>212 @ 6200 </td> <td>212 @ 6200 </td> </tr> <tr> <th>Max Torque (Nm@rpm) </th> <td>212 @ 6200 </td> <td>212 @ 6200 </td> <td>212 @ 6200 </td> </tr> <tr> <th>Mileage (ARAI) (kmpl) </th> <td>7</td> <td>7</td> <td>5</td> </tr> <tr> <th>Alternate Fuel </th> <td>7</td> <td>7</td> <td>5</td> </tr> <tr> <th>Transmission Type </th> <td>7</td> <td>7</td> <td>5</td> </tr> <tr> <th>No of gears (Gears) </th> <td>7</td> <td>7</td> <td>5</td> </tr> <tr> <th>Drivetrain </th> <td>7</td> <td>7</td> <td>5</td> </tr> <tr> <th>Air Conditioner </th> <td>Automatic Climate Control </td> <td>Automatic Climate Control </td> <td>Automatic Climate Control </td> </tr> <tr> <th>Power Windows </th> <td>7</td> <td>7</td> <td>5</td> </tr> <tr> <th>Central Locking </th> <td>7</td> <td>7</td> <td>5</td> </tr> <tr> <th>Anti-Lock Braking System (ABS) </th> <td>7</td> <td>7</td> <td>5</td> </tr> <tr> <th>Seat Upholstery </th> <td>7</td> <td>7</td> <td>5</td> </tr> <tr> <th>Front Tyres </th> <td>7</td> <td>7</td> <td>5</td> </tr> <tr> <th>Rear Tyres </th> <td>7</td> <td>7</td> <td>5</td> </tr> </tbody> </table> </div> </div> </div> <div class="tab-pane container fade" id="menu1">...</div> <div class="tab-pane container fade" id="menu2">...</div> </div> </div> </div> </div>

Related: See More


Questions / Comments: