"Test Tab"
Bootstrap 4.1.1 Snippet by surenderkumar

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <title>Insert title here</title> </head> <body> <div class="container"> <h2>Dynamic Tabs</h2> <ul class="nav nav-tabs nav-justified"> <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#welcome">Welcome</a></li> <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="tab" href="#incident_management">Incident Management</a> </li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#action_managment">Action Management</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#idea_management">Idea Management(Fekra)</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#erm">ERM</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div id="welcome" class="container tab-pane active"> <br> <h3>welcome</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="incident_management" class="container tab-pane fade"> <br> <h3>incident_management</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="action_managment" class="container tab-pane fade"> <br> <h3>action_managment</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div id="idea_management" class="container tab-pane fade"> <br> <h3>idea_managementt</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div id="erm" class="container tab-pane fade"> <br> <h3>ERM</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> </div> </div> </body> </html>
/* Tabs*/ section { padding: 60px 0; } section .section-title { text-align: center; color: #007b5e; margin-bottom: 50px; text-transform: uppercase; } #tabs{ background: #007b5e; color: #eee; } #tabs h6.section-title{ color: #eee; } #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #f3f3f3; background-color: transparent; border-color: transparent transparent #f3f3f3; border-bottom: 4px solid !important; font-size: 20px; font-weight: bold; } #tabs .nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: .25rem; border-top-right-radius: .25rem; color: #eee; font-size: 20px; }

Related: See More

Datepicker

Questions / Comments: