title: How to remove side bar and place panel at center
body: <p>I have designed a page where I no need side bar need to remove that and   I need place a panel at center</p>
  
  <p>I have designed tabs at panel heading when I do mouse over to each tab, the mouse over color not fit to the row below all tabs </p>
  
  <p>on mouse over there is some background color at each tab name I need to avoid </p>
  
  <p>as a beginner I developed please give suggestion to clear this out</p>
  
  <p><a href="https://jsfiddle.net/ym3yk38m/4/" rel="nofollow noreferrer">https://jsfiddle.net/ym3yk38m/4/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav-tabs { border-bottom: 6px solid #DDD; }
  .nav-tabs &gt; li.active &gt; a, .nav-tabs &gt; li.active &gt; a:focus,.nav-tabs &gt; li.active &gt; a:focus {border: none;background:#f8f8f8; } .nav-tabs &gt; li.active &gt; a:hover { border-width: 0;background:#f8f8f8;}
  .nav-tabs &gt; li &gt; a { border: none; color: #666; padding:10px 95px; width:500px; }
  .nav-tabs &gt; li.active &gt; a, .nav-tabs &gt; li &gt; a:hover { border: none;background:#f8f8f8; }
  .nav-tabs &gt; li &gt; a::after { content: ""; background: #00a8a8; height: 7px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
  .nav-tabs &gt; li.active &gt; a::after, .nav-tabs &gt; li:hover &gt; a::after { transform: scale(1); }
  .tab-nav &gt; li &gt; a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
  .tab-pane { padding: 15px 0; }
  .tab-content{padding:20px}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Metis Menu Plugin JavaScript --&gt;
      &lt;script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Custom Theme JavaScript --&gt;
      &lt;script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"&gt;&lt;/script&gt;
      
       &lt;!-- Custom Theme JavaScript --&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"&gt;&lt;/script&gt;
   
   &lt;!--bootstrapValidator--&gt;
   &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"&gt;&lt;/script&gt;
  &lt;link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet"&gt;
  
  &lt;!-- Custom CSS --&gt;
  &lt;link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" rel="stylesheet"&gt;
  
  &lt;!-- Custom Fonts --&gt;
  &lt;link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
      
      
  &lt;!-- Date picker css --&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css"&gt;
  &lt;div id="wrapper"&gt;
    &lt;!-- Navigation --&gt;
    &lt;nav class="navbar navbar-default navbar-static-top" role="navigation"
     style="margin-bottom: 0"&gt;
     &lt;div class="navbar-header"&gt;
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse"
       data-target=".navbar-collapse"&gt;
       &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt; &lt;span
        class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span
        class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class="navbar-brand" href="index.html"&gt;&lt;/a&gt;
     &lt;/div&gt;
     &lt;!-- /.navbar-header --&gt;
  
     &lt;ul class="nav navbar-top-links navbar-right"&gt;
     &lt;/ul&gt;
     &lt;!-- /.navbar-top-links --&gt;
     &lt;div class="navbar-default sidebar" role="navigation"&gt;
      &lt;div class="sidebar-nav navbar-collapse"&gt;
       &lt;ul class="nav" id="side-menu"&gt;  
        
       &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- /.sidebar-collapse --&gt;
     &lt;/div&gt;
     &lt;!-- /.navbar-static-side --&gt;
    &lt;/nav&gt;
    &lt;!-- Page Content --&gt;
    &lt;div id="page-wrapper"&gt;
     &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
       &lt;div class="col-lg-12"&gt;
        &lt;h3 class="page-header"&gt;
         &lt;b&gt;Student Self Enrollment&lt;/b&gt;
        &lt;/h3&gt;
       &lt;/div&gt;
       &lt;div class="col-lg-12"&gt;
        &lt;div class="panel panel-default"&gt;
         &lt;div class="panel-heading"&gt;
          &lt;ul class="nav nav-tabs" role="tablist"&gt;
                                           &lt;li class="col-lg-4 role="presentation" class="active"&gt;&lt;a href="#home" aria-controls="home" role="tab" data-toggle="tab"&gt;Personal Info&lt;/a&gt;&lt;/li&gt;
                                          &lt;li class="col-lg-4 role="presentation"&gt;&lt;a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"&gt;Contact Info&lt;/a&gt;&lt;/li&gt;
                                          &lt;li class="col-lg-4 role="presentation"&gt;&lt;a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"&gt;Previous Educational Info&lt;/a&gt;&lt;/li&gt;                                    
                                 &lt;/ul&gt;       
         &lt;/div&gt;
         &lt;!-- /.panel-heading --&gt;
         &lt;div class="panel-body"&gt;
          &lt;div class="form-body"&gt;
           &lt;form class="form-horizontal" method="post"&gt;
              &lt;div class="tab-content"&gt;
                      
            &lt;!--Personal info tab div --&gt;
                                          &lt;div role="tabpanel" class="tab-pane active" id="home"&gt;
            &lt;h3 style="color: red"&gt;Student Details&lt;/h3&gt;
            
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Student Name&lt;/label&gt;
             &lt;!--&lt;div class="group"&gt;--&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="student.studentFirstName" type="text" class="form-control" id="studentFirstName" placeholder="First Name" /&gt;
              
             &lt;/div&gt;           
             &lt;div class="col-xs-3"&gt;
              &lt;input name="student.studentMiddleName" type="text" class="form-control" id="studentMiddleName" placeholder="Middle name" /&gt;
              
             &lt;/div&gt;
             &lt;div class="col-xs-3"&gt;            
              &lt;input name="student.studentLastName" type="text" class="form-control" id="studentLastName" placeholder="Last name" /&gt;
              
             &lt;/div&gt;          
            &lt;/div&gt;
  
             &lt;div class="form-group"&gt;
            &lt;label class="col-xs-2 control-label"&gt;Date-of-birth&lt;/label&gt;
             &lt;div class="col-xs-3 "&gt;
              
              &lt;div class="input-group input-append date" id="studentDOB"&gt;             
               &lt;input name="student.studentDOB" type="text" class="form-control"  placeholder="Date-Of-Birth" /&gt;
               
               &lt;span class="input-group-addon add-on"&gt;&lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;&lt;/span&gt;
              &lt;/div&gt;
             &lt;/div&gt;
             &lt;label class="col-xs-3 control-label"&gt;Gender&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;div class="btn-group" data-toggle="buttons"&gt;
               &lt;label class="btn btn-default"&gt;             
               &lt;input type="radio" name="optradio"&gt;Male&lt;/label&gt;
                &lt;label class="btn btn-default"&gt; 
                &lt;input type="radio" name="optradio"&gt;Female&lt;/label&gt;
              &lt;/div&gt;
             &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Place of Birth &lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="student.studentBirthPlace" type="text" class="form-control" id="studentBirthPlace" placeholder="Place of Birth" /&gt;
              
             &lt;/div&gt;
             &lt;label class="col-xs-3 control-label"&gt;Mother Toungue&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="student.studentMotherTounge" type="text" class="form-control" id="studentMotherTounge" placeholder="Mother Toungue" /&gt;
              
             &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Blood Group &lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="student.studentBloodGroup" type="text" class="form-control" id="studentBloodGroup" placeholder="Blood Group" /&gt;
              
             &lt;/div&gt;
             &lt;label class="col-xs-3 control-label"&gt;Class Name&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;            
                &lt;select class="form-control" id="sel1"&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
    &lt;/select&gt;
               &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Image&lt;/label&gt;
             &lt;div class="col-xs-9"&gt;
              &lt;input type="file" class="form-control" name="student.studentImage"/&gt;
             &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;h3 style="color: red"&gt;Parent Details&lt;/h3&gt;
  
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Father Name&lt;/label&gt;
             &lt;div class="group"&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.fatherFirstName" type="text" class="form-control" id="fatherFirstName" placeholder="First name" /&gt;
              
             &lt;/div&gt;
             &lt;/div&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.fatherMiddleName" type="text" class="form-control" id="fatherMiddleName" placeholder="Middle name" /&gt;
              
             &lt;/div&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.fatherLastName" type="text" class="form-control" id="fatherLastName" placeholder="Last name" /&gt;
              
             &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Mother Name&lt;/label&gt;
             &lt;div class="group"&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.motherFirstName" type="text" class="form-control" id="motherFirstName" placeholder="First name" /&gt;
              
             &lt;/div&gt;
             &lt;/div&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.motherMiddleName" type="text" class="form-control" id="motherMiddleName" placeholder="Middle name" /&gt;
              
             &lt;/div&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.motherLastName" type="text" class="form-control" id="motherLastName" placeholder="Last name" /&gt;
              
             &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Gaurdian Name&lt;/label&gt;
             &lt;div class="group"&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.gaurdianFirstName" type="text" class="form-control" id="gaurdianFirstName" placeholder="First name" /&gt;
              
             &lt;/div&gt;
             &lt;/div&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.gaurdianMiddleName" type="text" class="form-control" id="gaurdianMiddleName" placeholder="Middle name" /&gt;
              
             &lt;/div&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.gaurdianLastName" type="text" class="form-control" id="gaurdianLastName" placeholder="Last name" /&gt;
              
             &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Occupation&lt;/label&gt;
             &lt;div class="col-xs-9"&gt;
              &lt;input name="parent.occupation" type="text" class="form-control" id="occupation" placeholder="Occupation" /&gt;
              
             &lt;/div&gt;
            &lt;/div&gt;
  
  
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Qualification&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.qualification" type="text" class="form-control" id="qualification" placeholder="Qualification" /&gt;
              
             &lt;/div&gt;
             &lt;label class="col-xs-3 control-label"&gt;Income&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.income" type="text" class="form-control" id="income" placeholder="Income" /&gt;
              
             &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Nationality&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="student.nationality" type="text" class="form-control" id="nationality" placeholder="Ex: Indian"/&gt;
              
             &lt;/div&gt;
             &lt;label class="col-xs-3 control-label"&gt;Religion&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="student.religion" type="text" class="form-control" id="religion" placeholder="EX: Hindhu Muslim..."/&gt;
              
             &lt;/div&gt;
            &lt;/div&gt;
            
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Caste&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="student.caste" type="text" class="form-control" id="caste" placeholder="Ex:Okkaliga,Lingayath"/&gt;
              
             &lt;/div&gt;
             &lt;label class="col-xs-3 control-label"&gt;Category&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="student.category" type="text" class="form-control" id="category" placeholder="Ex:3a,2a...."/&gt;
              
             &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
            &lt;label class="col-xs-11 control-label"&gt;&lt;/label&gt;
             &lt;div class="col-xs-20 "&gt;
              &lt;button type="button" class="btn btn-primary"&gt;Next&lt;/button&gt;
             &lt;/div&gt;           
            &lt;/div&gt;                           
            &lt;/div&gt;
            
            &lt;!--Contact info tab div --&gt;
                                          &lt;div role="tabpanel" class="tab-pane" id="profile"&gt;
            
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Phone Number&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.phoneNumber" type="text" class="form-control" id="phoneNumber" placeholder="Phone Number"/&gt;
              
             &lt;/div&gt;
             &lt;label class="col-xs-3 control-label"&gt;Emergency Contact&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;input name="parent.emergencyContact" type="text" class="form-control" id="emergencyContact" placeholder="Emergency Contact" /&gt;
              
             &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Email&lt;/label&gt;
             &lt;div class="col-xs-9"&gt;
              &lt;input name="parent.emailID" type="text" class="form-control" id="email" placeholder="Email"/&gt;
              
             &lt;/div&gt;
            &lt;/div&gt;
  
             &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Permanent Address&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;            
              &lt;textarea class="form-control" name="student.permanentAddress" rows="5" cols="30" /&gt;
             &lt;/div&gt;
             &lt;label class="col-xs-3 control-label"&gt;Present Address&lt;/label&gt;
             &lt;div class="col-xs-3"&gt;
              &lt;textarea class="form-control" name="student.presentAddress" rows="5" cols="30" /&gt;
             &lt;/div&gt;
            &lt;/div&gt;
  
           &lt;div class="form-group"&gt;
            &lt;label class="col-xs-11 control-label"&gt;&lt;/label&gt;
             &lt;div class="col-xs-20 "&gt;
              &lt;button type="button" class="btn btn-primary"&gt;Next&lt;/button&gt;
             &lt;/div&gt;           
            &lt;/div&gt;
          &lt;/div&gt;
            
            &lt;!--Previous Educational info tab div --&gt;
                                          &lt;div role="tabpanel" class="tab-pane" id="messages"&gt;
            
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;School Name&lt;/label&gt;
             &lt;div class="col-xs-9"&gt;
              &lt;input name="student.previousSchoolName" type="text" class="form-control" id="schoolName" placeholder="Previous School Name"/&gt;
              
             &lt;/div&gt;
            &lt;/div&gt;
            
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;From&lt;/label&gt;
             &lt;div class="col-xs-3 "&gt;
              &lt;div class="input-group input-append date" id="from"&gt;
               &lt;input name="student.fromYear" type="text" class="form-control" id="from" placeholder="From Year"/&gt;
               
               &lt;span class="input-group-addon add-on"&gt;&lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;&lt;/span&gt;
              &lt;/div&gt;
             &lt;/div&gt;
  
             &lt;label class="col-xs-3 control-label"&gt;To&lt;/label&gt;
             &lt;div class="col-xs-3 "&gt;
              &lt;div class="input-group input-append date" id="to"&gt;
               &lt;input name="student.toYear" type="text" class="form-control" id="to" placeholder="To Year"/&gt;
               
               &lt;span class="input-group-addon add-on"&gt;&lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;&lt;/span&gt;
              &lt;/div&gt;
             &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Reason for Change&lt;/label&gt;
             &lt;div class="col-xs-9"&gt;
              &lt;input name="student.reasonForChange" type="text" class="form-control" id="reasonForChange" placeholder="Reason for Change"/&gt;
              
             &lt;/div&gt;
            &lt;/div&gt;
  
             
            
            &lt;div class="form-group"&gt;
             &lt;label class="col-xs-2 control-label"&gt;Tc Document&lt;/label&gt;
             &lt;div class="col-xs-9"&gt;
              &lt;input type="file" class="form-control" name="student.tcDocument"  /&gt;
             &lt;/div&gt;
            &lt;/div&gt;      
   
             &lt;div class="form-group"&gt;
            &lt;label class="col-xs-11 control-label"&gt;&lt;/label&gt;
             &lt;div class="col-xs-20 "&gt;
              &lt;button type="Submit" class="btn btn-success"&gt;Finish&lt;/button&gt;
             &lt;/div&gt;           
            &lt;/div&gt;                 
            &lt;/div&gt;          
                                      &lt;/div&gt;         
           &lt;/form&gt;
          &lt;/div&gt;
          &lt;!-- /.form-body --&gt;
         &lt;/div&gt;
         &lt;!-- /.panel-body --&gt;
        &lt;/div&gt;
        &lt;!-- /.panel --&gt;
       &lt;/div&gt;
       &lt;!-- /.col-lg-12 --&gt;
      &lt;/div&gt;
      &lt;!-- /.row --&gt;
     &lt;/div&gt;
     &lt;!-- /.container-fluid --&gt;
    &lt;/div&gt;
    &lt;!-- /#page-wrapper --&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>