如何拆除侧栏和放置中心的面板

时间:2018-04-29 10:52:01

标签: javascript html css

我设计了一个页面,我不需要侧栏需要删除它,我需要在中心放置一个面板

当我将鼠标悬停在每个标签上时,我在面板标题处设计了标签,鼠标颜色不适合所有标签下方的行

鼠标悬停在每个标签名称上都有一些背景颜色我需要避免

作为我开发的初学者,请提出建议以清除这一点

https://jsfiddle.net/ym3yk38m/4/

.nav-tabs { border-bottom: 6px solid #DDD; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus,.nav-tabs > li.active > a:focus {border: none;background:#f8f8f8; } .nav-tabs > li.active > a:hover { border-width: 0;background:#f8f8f8;}
.nav-tabs > li > a { border: none; color: #666; padding:10px 95px; width:500px; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none;background:#f8f8f8; }
.nav-tabs > li > 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 > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
    
     <!-- Custom Theme JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
	
	<!--bootstrapValidator-->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    
    
<!-- Date picker css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css">
<div id="wrapper">
		<!-- Navigation -->
		<nav class="navbar navbar-default navbar-static-top" role="navigation"
			style="margin-bottom: 0">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="index.html"></a>
			</div>
			<!-- /.navbar-header -->

			<ul class="nav navbar-top-links navbar-right">
			</ul>
			<!-- /.navbar-top-links -->
			<div class="navbar-default sidebar" role="navigation">
				<div class="sidebar-nav navbar-collapse">
					<ul class="nav" id="side-menu">		
						
					</ul>
				</div>
				<!-- /.sidebar-collapse -->
			</div>
			<!-- /.navbar-static-side -->
		</nav>
		<!-- Page Content -->
		<div id="page-wrapper">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-12">
						<h3 class="page-header">
							<b>Student Self Enrollment</b>
						</h3>
					</div>
					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
							 <ul class="nav nav-tabs" role="tablist">
                                         <li class="col-lg-4 role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Personal Info</a></li>
                                        <li class="col-lg-4 role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Contact Info</a></li>
                                        <li class="col-lg-4 role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Previous Educational Info</a></li>                                    
                               </ul>							
							</div>
							<!-- /.panel-heading -->
							<div class="panel-body">
								<div class="form-body">
									<form class="form-horizontal" method="post">
									   <div class="tab-content">
									   								
									 <!--Personal info tab div -->
                                        <div role="tabpanel" class="tab-pane active" id="home">
										<h3 style="color: red">Student Details</h3>
										
										<div class="form-group">
											<label class="col-xs-2 control-label">Student Name</label>
											<!--<div class="group">-->
											<div class="col-xs-3">
												<input name="student.studentFirstName" type="text" class="form-control" id="studentFirstName" placeholder="First Name" />
												
											</div>											
											<div class="col-xs-3">
												<input name="student.studentMiddleName" type="text" class="form-control" id="studentMiddleName" placeholder="Middle name" />
												
											</div>
											<div class="col-xs-3">												
												<input name="student.studentLastName" type="text" class="form-control" id="studentLastName" placeholder="Last name" />
												
											</div>										
										</div>

										 <div class="form-group">
										<label class="col-xs-2 control-label">Date-of-birth</label>
											<div class="col-xs-3 ">
												
												<div class="input-group input-append date" id="studentDOB">													
													<input name="student.studentDOB" type="text" class="form-control"  placeholder="Date-Of-Birth" />
													
													<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
												</div>
											</div>
											<label class="col-xs-3 control-label">Gender</label>
											<div class="col-xs-3">
												<div class="btn-group" data-toggle="buttons">
													<label class="btn btn-default">													
													<input type="radio" name="optradio">Male</label>
													 <label class="btn btn-default"> 
													 <input type="radio" name="optradio">Female</label>
												</div>
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Place of Birth </label>
											<div class="col-xs-3">
												<input name="student.studentBirthPlace" type="text" class="form-control" id="studentBirthPlace" placeholder="Place of Birth" />
												
											</div>
											<label class="col-xs-3 control-label">Mother Toungue</label>
											<div class="col-xs-3">
												<input name="student.studentMotherTounge" type="text" class="form-control" id="studentMotherTounge" placeholder="Mother Toungue" />
												
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Blood Group </label>
											<div class="col-xs-3">
												<input name="student.studentBloodGroup" type="text" class="form-control" id="studentBloodGroup" placeholder="Blood Group" />
												
											</div>
											<label class="col-xs-3 control-label">Class Name</label>
											<div class="col-xs-3">												
														<select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
													</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Image</label>
											<div class="col-xs-9">
												<input type="file" class="form-control" name="student.studentImage"/>
											</div>
										</div>

										<h3 style="color: red">Parent Details</h3>

										<div class="form-group">
											<label class="col-xs-2 control-label">Father Name</label>
											<div class="group">
											<div class="col-xs-3">
												<input name="parent.fatherFirstName" type="text" class="form-control" id="fatherFirstName" placeholder="First name" />
												
											</div>
											</div>
											<div class="col-xs-3">
												<input name="parent.fatherMiddleName" type="text" class="form-control" id="fatherMiddleName" placeholder="Middle name" />
												
											</div>
											<div class="col-xs-3">
												<input name="parent.fatherLastName" type="text" class="form-control" id="fatherLastName" placeholder="Last name" />
												
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Mother Name</label>
											<div class="group">
											<div class="col-xs-3">
												<input name="parent.motherFirstName" type="text" class="form-control" id="motherFirstName" placeholder="First name" />
												
											</div>
											</div>
											<div class="col-xs-3">
												<input name="parent.motherMiddleName" type="text" class="form-control" id="motherMiddleName" placeholder="Middle name" />
												
											</div>
											<div class="col-xs-3">
												<input name="parent.motherLastName" type="text" class="form-control" id="motherLastName" placeholder="Last name" />
												
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Gaurdian Name</label>
											<div class="group">
											<div class="col-xs-3">
												<input name="parent.gaurdianFirstName" type="text" class="form-control" id="gaurdianFirstName" placeholder="First name" />
												
											</div>
											</div>
											<div class="col-xs-3">
												<input name="parent.gaurdianMiddleName" type="text" class="form-control" id="gaurdianMiddleName" placeholder="Middle name" />
												
											</div>
											<div class="col-xs-3">
												<input name="parent.gaurdianLastName" type="text" class="form-control" id="gaurdianLastName" placeholder="Last name" />
												
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Occupation</label>
											<div class="col-xs-9">
												<input name="parent.occupation" type="text" class="form-control" id="occupation" placeholder="Occupation" />
												
											</div>
										</div>


										<div class="form-group">
											<label class="col-xs-2 control-label">Qualification</label>
											<div class="col-xs-3">
												<input name="parent.qualification" type="text" class="form-control" id="qualification" placeholder="Qualification" />
												
											</div>
											<label class="col-xs-3 control-label">Income</label>
											<div class="col-xs-3">
												<input name="parent.income" type="text" class="form-control" id="income" placeholder="Income" />
												
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Nationality</label>
											<div class="col-xs-3">
												<input name="student.nationality" type="text" class="form-control" id="nationality" placeholder="Ex: Indian"/>
												
											</div>
											<label class="col-xs-3 control-label">Religion</label>
											<div class="col-xs-3">
												<input name="student.religion" type="text" class="form-control" id="religion" placeholder="EX: Hindhu Muslim..."/>
												
											</div>
										</div>
										
										<div class="form-group">
											<label class="col-xs-2 control-label">Caste</label>
											<div class="col-xs-3">
												<input name="student.caste" type="text" class="form-control" id="caste" placeholder="Ex:Okkaliga,Lingayath"/>
												
											</div>
											<label class="col-xs-3 control-label">Category</label>
											<div class="col-xs-3">
												<input name="student.category" type="text" class="form-control" id="category" placeholder="Ex:3a,2a...."/>
												
											</div>
										</div>

										<div class="form-group">
										<label class="col-xs-11 control-label"></label>
											<div class="col-xs-20 ">
												<button type="button" class="btn btn-primary">Next</button>
											</div>											
										</div>								           								
										</div>
										
										<!--Contact info tab div -->
                                        <div role="tabpanel" class="tab-pane" id="profile">
										
										<div class="form-group">
											<label class="col-xs-2 control-label">Phone Number</label>
											<div class="col-xs-3">
												<input name="parent.phoneNumber" type="text" class="form-control" id="phoneNumber" placeholder="Phone Number"/>
												
											</div>
											<label class="col-xs-3 control-label">Emergency Contact</label>
											<div class="col-xs-3">
												<input name="parent.emergencyContact" type="text" class="form-control" id="emergencyContact" placeholder="Emergency Contact" />
												
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Email</label>
											<div class="col-xs-9">
												<input name="parent.emailID" type="text" class="form-control" id="email" placeholder="Email"/>
												
											</div>
										</div>

											<div class="form-group">
											<label class="col-xs-2 control-label">Permanent Address</label>
											<div class="col-xs-3">												
												<textarea class="form-control" name="student.permanentAddress" rows="5" cols="30" />
											</div>
											<label class="col-xs-3 control-label">Present Address</label>
											<div class="col-xs-3">
												<textarea class="form-control" name="student.presentAddress" rows="5" cols="30" />
											</div>
										</div>

									<div class="form-group">
										<label class="col-xs-11 control-label"></label>
											<div class="col-xs-20 ">
												<button type="button" class="btn btn-primary">Next</button>
											</div>											
										</div>
								</div>
										
										<!--Previous Educational info tab div -->
                                        <div role="tabpanel" class="tab-pane" id="messages">
										
										<div class="form-group">
											<label class="col-xs-2 control-label">School Name</label>
											<div class="col-xs-9">
												<input name="student.previousSchoolName" type="text" class="form-control" id="schoolName" placeholder="Previous School Name"/>
												
											</div>
										</div>
										
										<div class="form-group">
											<label class="col-xs-2 control-label">From</label>
											<div class="col-xs-3 ">
												<div class="input-group input-append date" id="from">
													<input name="student.fromYear" type="text" class="form-control" id="from" placeholder="From Year"/>
													
													<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
												</div>
											</div>

											<label class="col-xs-3 control-label">To</label>
											<div class="col-xs-3 ">
												<div class="input-group input-append date" id="to">
													<input name="student.toYear" type="text" class="form-control" id="to" placeholder="To Year"/>
													
													<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
												</div>
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Reason for Change</label>
											<div class="col-xs-9">
												<input name="student.reasonForChange" type="text" class="form-control" id="reasonForChange" placeholder="Reason for Change"/>
												
											</div>
										</div>

											
										
										<div class="form-group">
											<label class="col-xs-2 control-label">Tc Document</label>
											<div class="col-xs-9">
												<input type="file" class="form-control" name="student.tcDocument"  />
											</div>
										</div>						
 
											<div class="form-group">
										<label class="col-xs-11 control-label"></label>
											<div class="col-xs-20 ">
												<button type="Submit" class="btn btn-success">Finish</button>
											</div>											
										</div>										       
										</div>										
                                    </div>									
									</form>
								</div>
								<!-- /.form-body -->
							</div>
							<!-- /.panel-body -->
						</div>
						<!-- /.panel -->
					</div>
					<!-- /.col-lg-12 -->
				</div>
				<!-- /.row -->
			</div>
			<!-- /.container-fluid -->
		</div>
		<!-- /#page-wrapper -->
	</div>

1 个答案:

答案 0 :(得分:2)

网页中心解决方案:

您的#page-wrapper元素的边距为250px,删除它会使元素居中:

#page-wrapper {
  ...
  margin-right: 0;
  ...
}

标签溢出解决方案:

发生标签的溢出问题是因为您在以下规则中使用其子a元素设置了500px的宽度:

.nav-tabs > li > a { 
    ...
    width:500px; 
}

在代码中,您有一个针对以下元素.nav>li>a的规则,并指定它们应显示为块元素,在这种情况下,您可以删除上面选择器的宽度,它应该修复溢出问题,因为默认情况下,块元素将占用其容器宽度的100%。

查看下面的工作演示:

#page-wrapper {
  margin-left: 0 !important;
 }

.nav-tabs {
  border-bottom: 6px solid #DDD;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:focus {
  border: none;
  background: #f8f8f8;
}

.nav-tabs>li.active>a:hover {
  border-width: 0;
  background: #f8f8f8;
}

.nav-tabs>li>a {
  border: none;
  color: #666;
  padding: 10px 95px;
  /*width: 500px;*/
}

.nav-tabs>li.active>a,
.nav-tabs>li>a:hover {
  border: none;
  background: #f8f8f8;
}

.nav-tabs>li>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>li.active>a::after,
.nav-tabs>li:hover>a::after {
  transform: scale(1);
}

.tab-nav>li>a::after {
  background: #21527d none repeat scroll 0% 0%;
  color: #fff;
}

.tab-pane {
  padding: 15px 0;
}

.tab-content {
  padding: 20px
}
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>

<!-- Custom Theme JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<!--bootstrapValidator-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">


<!-- Date picker css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css">
<div id="wrapper">
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
      <a class="navbar-brand" href="index.html"></a>
    </div>
    <!-- /.navbar-header -->

    <ul class="nav navbar-top-links navbar-right">
    </ul>
    <!-- /.navbar-top-links -->
    <div class="navbar-default sidebar" role="navigation">
      <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">

        </ul>
      </div>
      <!-- /.sidebar-collapse -->
    </div>
    <!-- /.navbar-static-side -->
  </nav>
  <!-- Page Content -->
  <div id="page-wrapper">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <h3 class="page-header">
            <b>Student Self Enrollment</b>
          </h3>
        </div>
        <div class="col-lg-12">
          <div class="panel panel-default">
            <div class="panel-heading">
              <ul class="nav nav-tabs" role="tablist">
                <li class="col-lg-4 role=" presentation " class="active "><a href="#home " aria-controls="home " role="tab " data-toggle="tab ">Personal Info</a></li>
                                        <li class="col-lg-4 role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Contact Info</a></li>
                <li class="col-lg-4 role=" presentation "><a href="#messages " aria-controls="messages " role="tab " data-toggle="tab ">Previous Educational Info</a></li>                                    
                               </ul>							
							</div>
							<!-- /.panel-heading -->
							<div class="panel-body ">
								<div class="form-body ">
									<form class="form-horizontal " method="post ">
									   <div class="tab-content ">
									   								
									 <!--Personal info tab div -->
                                        <div role="tabpanel " class="tab-pane active " id="home ">
										<h3 style="color: red ">Student Details</h3>
										
										<div class="form-group ">
											<label class="col-xs-2 control-label ">Student Name</label>
											<!--<div class="group ">-->
											<div class="col-xs-3 ">
												<input name="student.studentFirstName " type="text " class="form-control " id="studentFirstName " placeholder="First Name " />
												
											</div>											
											<div class="col-xs-3 ">
												<input name="student.studentMiddleName " type="text " class="form-control " id="studentMiddleName " placeholder="Middle name " />
												
											</div>
											<div class="col-xs-3 ">												
												<input name="student.studentLastName " type="text " class="form-control " id="studentLastName " placeholder="Last name " />
												
											</div>										
										</div>

										 <div class="form-group ">
										<label class="col-xs-2 control-label ">Date-of-birth</label>
											<div class="col-xs-3 ">
												
												<div class="input-group input-append date " id="studentDOB ">													
													<input name="student.studentDOB " type="text " class="form-control "  placeholder="Date-Of-Birth " />
													
													<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
												</div>
											</div>
											<label class="col-xs-3 control-label ">Gender</label>
											<div class="col-xs-3 ">
												<div class="btn-group " data-toggle="buttons ">
													<label class="btn btn-default ">													
													<input type="radio " name="optradio ">Male</label>
													 <label class="btn btn-default "> 
													 <input type="radio " name="optradio ">Female</label>
												</div>
											</div>
										</div>

										<div class="form-group ">
											<label class="col-xs-2 control-label ">Place of Birth </label>
											<div class="col-xs-3 ">
												<input name="student.studentBirthPlace " type="text " class="form-control " id="studentBirthPlace " placeholder="Place of Birth " />
												
											</div>
											<label class="col-xs-3 control-label ">Mother Toungue</label>
											<div class="col-xs-3 ">
												<input name="student.studentMotherTounge " type="text " class="form-control " id="studentMotherTounge " placeholder="Mother Toungue " />
												
											</div>
										</div>

										<div class="form-group ">
											<label class="col-xs-2 control-label ">Blood Group </label>
											<div class="col-xs-3 ">
												<input name="student.studentBloodGroup " type="text " class="form-control " id="studentBloodGroup " placeholder="Blood Group " />
												
											</div>
											<label class="col-xs-3 control-label ">Class Name</label>
											<div class="col-xs-3 ">												
														<select class="form-control " id="sel1 ">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
													</div>
										</div>

										<div class="form-group ">
											<label class="col-xs-2 control-label ">Image</label>
											<div class="col-xs-9 ">
												<input type="file " class="form-control " name="student.studentImage "/>
											</div>
										</div>

										<h3 style="color: red ">Parent Details</h3>

										<div class="form-group ">
											<label class="col-xs-2 control-label ">Father Name</label>
											<div class="group ">
											<div class="col-xs-3 ">
												<input name="parent.fatherFirstName " type="text " class="form-control " id="fatherFirstName " placeholder="First name " />
												
											</div>
											</div>
											<div class="col-xs-3 ">
												<input name="parent.fatherMiddleName " type="text " class="form-control " id="fatherMiddleName " placeholder="Middle name " />
												
											</div>
											<div class="col-xs-3 ">
												<input name="parent.fatherLastName " type="text " class="form-control " id="fatherLastName " placeholder="Last name " />
												
											</div>
										</div>

										<div class="form-group ">
											<label class="col-xs-2 control-label ">Mother Name</label>
											<div class="group ">
											<div class="col-xs-3 ">
												<input name="parent.motherFirstName " type="text " class="form-control " id="motherFirstName " placeholder="First name " />
												
											</div>
											</div>
											<div class="col-xs-3 ">
												<input name="parent.motherMiddleName " type="text " class="form-control " id="motherMiddleName " placeholder="Middle name " />
												
											</div>
											<div class="col-xs-3 ">
												<input name="parent.motherLastName " type="text " class="form-control " id="motherLastName " placeholder="Last name " />
												
											</div>
										</div>

										<div class="form-group ">
											<label class="col-xs-2 control-label ">Gaurdian Name</label>
											<div class="group ">
											<div class="col-xs-3 ">
												<input name="parent.gaurdianFirstName " type="text " class="form-control " id="gaurdianFirstName " placeholder="First name " />
												
											</div>
											</div>
											<div class="col-xs-3 ">
												<input name="parent.gaurdianMiddleName " type="text " class="form-control " id="gaurdianMiddleName " placeholder="Middle name " />
												
											</div>
											<div class="col-xs-3 ">
												<input name="parent.gaurdianLastName " type="text " class="form-control " id="gaurdianLastName " placeholder="Last name " />
												
											</div>
										</div>

										<div class="form-group ">
											<label class="col-xs-2 control-label ">Occupation</label>
											<div class="col-xs-9 ">
												<input name="parent.occupation " type="text " class="form-control " id="occupation " placeholder="Occupation " />
												
											</div>
										</div>


										<div class="form-group ">
											<label class="col-xs-2 control-label ">Qualification</label>
											<div class="col-xs-3 ">
												<input name="parent.qualification " type="text " class="form-control " id="qualification " placeholder="Qualification " />
												
											</div>
											<label class="col-xs-3 control-label ">Income</label>
											<div class="col-xs-3 ">
												<input name="parent.income " type="text " class="form-control " id="income " placeholder="Income " />
												
											</div>
										</div>

										<div class="form-group ">
											<label class="col-xs-2 control-label ">Nationality</label>
											<div class="col-xs-3 ">
												<input name="student.nationality " type="text " class="form-control " id="nationality " placeholder="Ex: Indian "/>
												
											</div>
											<label class="col-xs-3 control-label ">Religion</label>
											<div class="col-xs-3 ">
												<input name="student.religion " type="text " class="form-control " id="religion " placeholder="EX: Hindhu Muslim... "/>
												
											</div>
										</div>
										
										<div class="form-group ">
											<label class="col-xs-2 control-label ">Caste</label>
											<div class="col-xs-3 ">
												<input name="student.caste " type="text " class="form-control " id="caste " placeholder="Ex:Okkaliga,Lingayath "/>
												
											</div>
											<label class="col-xs-3 control-label ">Category</label>
											<div class="col-xs-3 ">
												<input name="student.category " type="text " class="form-control " id="category " placeholder="Ex:3a,2a.... "/>
												
											</div>
										</div>

										<div class="form-group ">
										<label class="col-xs-11 control-label "></label>
											<div class="col-xs-20 ">
												<button type="button " class="btn btn-primary ">Next</button>
											</div>											
										</div>								           								
										</div>
										
										<!--Contact info tab div -->
                                        <div role="tabpanel " class="tab-pane " id="profile ">
										
										<div class="form-group ">
											<label class="col-xs-2 control-label ">Phone Number</label>
											<div class="col-xs-3 ">
												<input name="parent.phoneNumber " type="text " class="form-control " id="phoneNumber " placeholder="Phone Number "/>
												
											</div>
											<label class="col-xs-3 control-label ">Emergency Contact</label>
											<div class="col-xs-3 ">
												<input name="parent.emergencyContact " type="text " class="form-control " id="emergencyContact " placeholder="Emergency Contact " />
												
											</div>
										</div>

										<div class="form-group ">
											<label class="col-xs-2 control-label ">Email</label>
											<div class="col-xs-9 ">
												<input name="parent.emailID " type="text " class="form-control " id="email " placeholder="Email "/>
												
											</div>
										</div>

											<div class="form-group ">
											<label class="col-xs-2 control-label ">Permanent Address</label>
											<div class="col-xs-3 ">												
												<textarea class="form-control " name="student.permanentAddress " rows="5 " cols="30 " />
											</div>
											<label class="col-xs-3 control-label ">Present Address</label>
											<div class="col-xs-3 ">
												<textarea class="form-control " name="student.presentAddress " rows="5 " cols="30 " />
											</div>
										</div>

									<div class="form-group ">
										<label class="col-xs-11 control-label "></label>
											<div class="col-xs-20 ">
												<button type="button " class="btn btn-primary ">Next</button>
											</div>											
										</div>
								</div>
										
										<!--Previous Educational info tab div -->
                                        <div role="tabpanel " class="tab-pane " id="messages ">
										
										<div class="form-group ">
											<label class="col-xs-2 control-label ">School Name</label>
											<div class="col-xs-9 ">
												<input name="student.previousSchoolName " type="text " class="form-control " id="schoolName " placeholder="Previous School Name "/>
												
											</div>
										</div>
										
										<div class="form-group ">
											<label class="col-xs-2 control-label ">From</label>
											<div class="col-xs-3 ">
												<div class="input-group input-append date " id="from ">
													<input name="student.fromYear " type="text " class="form-control " id="from " placeholder="From Year "/>
													
													<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
												</div>
											</div>

											<label class="col-xs-3 control-label ">To</label>
											<div class="col-xs-3 ">
												<div class="input-group input-append date " id="to ">
													<input name="student.toYear " type="text " class="form-control " id="to " placeholder="To Year "/>
													
													<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
												</div>
											</div>
										</div>

										<div class="form-group ">
											<label class="col-xs-2 control-label ">Reason for Change</label>
											<div class="col-xs-9 ">
												<input name="student.reasonForChange " type="text " class="form-control " id="reasonForChange " placeholder="Reason for Change "/>
												
											</div>
										</div>

											
										
										<div class="form-group ">
											<label class="col-xs-2 control-label ">Tc Document</label>
											<div class="col-xs-9 ">
												<input type="file " class="form-control " name="student.tcDocument "  />
											</div>
										</div>						
 
											<div class="form-group ">
										<label class="col-xs-11 control-label "></label>
											<div class="col-xs-20 ">
												<button type="Submit " class="btn btn-success ">Finish</button>
											</div>											
										</div>										       
										</div>										
                                    </div>									
									</form>
								</div>
								<!-- /.form-body -->
							</div>
							<!-- /.panel-body -->
						</div>
						<!-- /.panel -->
					</div>
					<!-- /.col-lg-12 -->
				</div>
				<!-- /.row -->
			</div>
			<!-- /.container-fluid -->
		</div>
		<!-- /#page-wrapper -->
	</div>