<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <h3>Default Tab</h3> <div class="tabbable-panel"> <div class="tabbable-line"> <ul class="nav nav-tabs "> <li class="active"> <a href="#tab_default_1" data-toggle="tab"> Enroll </a> </li> <li> <a href="#tab_default_2" data-toggle="tab"> Assign courses </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> Award Grades </a> </li> <a href="#tab_default_4" data-toggle="tab"> Is Graduate </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_default_1"> <p> Enroll a student </p> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.css"> <div class="container"> <div class="row"> <div class="com-md-12"> <div class="notification login-alert"> Please Enter the deatils of the student </div> <div class="notification notification-success logged-out"> Entry successfully! </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="well login-box"> <form action=""> <legend>Submit</legend> <div class="form-group"> <label for="Roll no">Roll no</label> <input value='' id="Roll no" placeholder="Roll no" type="text" class="form-control" /> </div> <div class="form-group"> <label for="First-name">First Name</label> <input value='' id="First-name" placeholder="First-Name" type="text" class="form-control" /> </div> <div class="form-group"> <label for="Last-name">Last Name</label> <input value='' id="Last-name" placeholder="Last-Name" type="text" class="form-control" /> </div> <div class="form-group"> <label for="Father's-name">Father's Name</label> <input value='' id="Father's-name" placeholder="Father's-name" type="text" class="form-control" /> </div> <div class="form-group"> <label for="Mother's-name">Mother's Name</label> <input value='' id="Mother's-name" placeholder="Mother's-name" type="text" class="form-control" /> </div> <div class="form-group"> <label for="Address">Address</label> <input value='' id="Address" placeholder="Address" type="text" class="form-control" /> </div> <div class="form-group"> <label for="Program">Program</label> <input value='' id="Program" placeholder="Program" type="text" class="form-control" /> </div> <div class="form-group"> <label for="year-of-enrolment">year of enrolment</label> <input value='' id="Year-of-enrolment" placeholder="Year-of-enrolment" type="text" class="form-control" /> </div> <div class="form-group"> <label for="Current-year">year</label> <input value='' id="Current-year" placeholder="Current-year" type="text" class="form-control" /> </div> <div class="form-group text-center"> <button class="btn btn-danger btn-cancel-action">Cancel</button> <input type="submit" class="btn btn-success btn-login-submit" value="Submit" /> </div> </form> </div> <div class="logged-in well"> <h1>Submitted! <div class="pull-right"></h1> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab_default_2"> <div class="container"> <p> Allot Courses to the student </p> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.css"> <div class="container"> <div class="row"> <div class="com-md-12"> <div class="notification login-alert"> Please Enter the course deatils of the student </div> <div class="notification notification-success logged-out"> Entry successfully! </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="well login-box"> <form action=""> <legend>Submit</legend> <div class="form-group"> <label for="Course Code">Course Code</label> <input value='' id="Course Code" placeholder="Course Code" type="text" class="form-control" /> </div> <div class="form-group"> <label for="Course Name">Course Name</label> <input value='' id="Course Name" placeholder="Course Name" type="text" class="form-control" /> </div> <div class="form-group"> <label for="Program">Program</label> <input value='' id="Program" placeholder="Program" type="text" class="form-control" /> </div> <div class="form-group text-center"> <button class="btn btn-danger btn-cancel-action">Cancel</button> <input type="submit" class="btn btn-success btn-login-submit" value="Submit" /> </div> </form> </div> <div class="logged-in well"> <h1>Submitted! <div class="pull-right"> </div> </div> </div> </div> <div class="tab-pane" id="tab_default_3"> <p> Award Grade to the student </p> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.css"> <div class="container"> <div class="row"> <div class="com-md-12"> <div class="notification login-alert"> Please Enter the grade of the student </div> <div class="notification notification-success logged-out"> Entry successfully! </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="well login-box"> <form action=""> <legend>Submit</legend> <div class="form-group"> <label for="Course Code">Course Code</label> <input value='' id="Course Code" placeholder="Course Code" type="text" class="form-control" /> </div> <div class="form-group"> <label for="Course Name">Course Name</label> <input value='' id="Course Name" placeholder="Course Name" type="text" class="form-control" /> </div> <div class="form-group"> <label for="Program">Program</label> <input value='' id="Program" placeholder="Program" type="text" class="form-control" /> </div> <div class="form-group"> <label for="Grade">Grade</label> <input value='' id="Grade" placeholder="Grade" type="text" class="form-control" /> </div> <div class="form-group text-center"> <button class="btn btn-danger btn-cancel-action">Cancel</button> <input type="submit" class="btn btn-success btn-login-submit" value="Submit" /> </div> </form> </div> <div class="logged-in well"> <h1>Submitted! <div class="pull-right"> </div> </div> </div> </div> </div> <div class="tab-content"> <div class="tab-pane active" id="tab_default_4"> <p> Is graduate </p> <p> Check if the student is graduate </p> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.css"> <div class="container"> <div class="row"> <div class="com-md-12"> <div class="notification login-alert"> Please Enter the deatils of the student </div> <div class="notification notification-success logged-out"> Entry successfully! </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="well login-box"> <form action=""> <legend>Submit</legend> <div class="form-group"> <label for="Roll no">Roll no</label> <input value='' id="Roll no" placeholder="Roll no" type="text" class="form-control" /> </div> <div class="form-group"> <label for="Name">Name</label> <input value='' id="Name" placeholder="Name" type="text" class="form-control" /> </div> <div class="form-group text-center"> <button class="btn btn-danger btn-cancel-action">Cancel</button> <input type="submit" class="btn btn-success btn-login-submit" value="Submit" /> </div> </form> </div> <div class="logged-in well"> <h1>Submitted! <div class="pull-right"> </div> </div> </div> </div> < <ul class="nav nav-tabs"> <li class="active"> <a href="#tab_below_1" data-toggle="tab"> Enrol</a> </li> <li class=""> <a href="#tab_below_2" data-toggle="tab"> Allot Courses</a> </li> <li> <a href="#tab_below_3" data-toggle="tab"> Award Grades </a> </li> <li class=""> <a href="#tab_below_4" data-toggle="tab"> Is Graduate </a> </li> </ul> </div> </div> </div> </div> </div> <br> <br> <center> <strong> </center> <br> <br><div class="container"> <div class="row"> </div> </div>