smitha gowda
Reputation: 161
How to remove side bar and place panel at center
I have designed a page where I no need side bar need to remove that and I need place a panel at center
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
on mouse over there is some background color at each tab name I need to avoid
as a beginner I developed please give suggestion to clear this out
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>Upvotes: 1
Views: 269
Answers (1)
Danny
Reputation: 1113
Page center solution:
Your #page-wrapper element has margin-right of 250px, removing this will centre the element:
#page-wrapper {
...
margin-right: 0;
...
}
Tab overflow solution:
The overflow problem of your tabs occurs because you have set a width of 500px their child a element using in the following rule:
.nav-tabs > li > a {
...
width:500px;
}
In code you have a rule that targets the following elements .nav>li>a and specifies that they should be displayed as block elements, with this being the case, you can remove the width on the above selector and it should fix the overflowing problem because block elements will take 100% of the width of their container by default.
View the working demo below:
#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>Upvotes: 2
Related Questions
- Left side navigation bar centered and close to page content
- How to center a sidebar menu elements
- Side bar fixed to left of the screen and Middle content with Margin: 0 auto
- Make a side bar to be on the right side of the screen
- Open panel half the size of window from center of window to the right
- Centered Content w/ Sidebar (no header)
- Position panel in center of page with minimum left position using CSS/HTML
- Side Panel in CSS
- Centering just the DIV instead of the sidebar too
- Fixed sidebar centered vertically