In my web form, there's a white space on the right side, how to remove it or resize the panel?
I have tried padding and margin also width for panel and container but it's not working.
.container {
margin-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="container" >
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title ">Personal Infomation</h3>
</div>
<div class="panel-body " >
<br>
<div id="p_info">
<div class="row">
<div class="col-md-6">
<label class="control-label">First Name</label>
<input class="form-control" id="first_name" >
</div>
</div>
<div class="row" >
<div class="col-md-6">
<label class="control-label">Last Name</label>
<input class="form-control" id="last_name" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Gender</label>
<select class="form-control field" id="sel1" >
<option disabled selected value> -- select an option -- </option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Date of Birth</label>
<input type="date" name="bdaytime" class="form-control" id="DOB" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Place of Birth</label>
<input class="form-control" id="Place" >
</div>
</div>
</div>
</div>
</div>
</div>
I want to remove white space on this web from. why would this shows like that
let me know.I want to remove white space on this web from. why would this shows like that
let me know.I want to remove white space on this web from. why would this shows like that
let me know.
I want to remove marked part
Bootstrap uses a media query for the .col-md-6 class where it goes from full width to half width with a screen larger than 992px:
#media (min-width: 992px)
.col-md-6 {
width: 50%;
}
You can either create your own CSS rules or use an inline style (e.g., <div class="col-md-6" style="width:100%">) to override this Bootstrap style rule.
Is this what you look for ?
.panel-body {
padding-left: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style>
.container {
margin-top: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
</head>
<body>
<div class="container" >
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title ">Personal Infomation</h3>
</div>
<div class="panel-body " >
<br>
<div id="p_info">
<div class="row">
<div class="col-md-6">
<label class="control-label">First Name</label>
<input class="form-control" id="first_name" >
</div>
</div>
<div class="row" >
<div class="col-md-6">
<label class="control-label">Last Name</label>
<input class="form-control" id="last_name" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Gender</label>
<select class="form-control field" id="sel1" >
<option disabled selected value> -- select an option -- </option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Date of Birth</label>
<input type="date" name="bdaytime" class="form-control" id="DOB" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Place of Birth</label>
<input class="form-control" id="Place" >
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.container {
margin-top: 50px;
}
.three-col {
width: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="container" >
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title ">Personal Information</h3>
</div>
<div class="panel-body " >
<br>
<div id="p_info">
<div class="row">
<div class="col-md-6">
<label class="control-label">First Name</label>
<input class="form-control" id="first_name" >
</div>
</div>
<div class="row" >
<div class="col-md-6">
<label class="control-label">Last Name</label>
<input class="form-control" id="last_name" >
</div>
</div>
<div class="row three-col">
<div class="col-md-3">
<label class="control-label">Gender</label>
<select class="form-control field" id="sel1" >
<option disabled selected value> -- select an option -- </option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
</div>
<div class="row three-col">
<div class="col-md-3">
<label class="control-label">Date of Birth</label>
<input type="date" name="bdaytime" class="form-control" id="DOB" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Place of Birth</label>
<input class="form-control" id="Place" >
</div>
</div>
</div>
</div>
</div>
</div>
Related
I got what I'm looking for but the animation effect isn't smooth as it should. I understand that the animation would be better if I don't have padding but I need padding to get the design. How do I solve this problem?
JSFiddle DEMO
HTML:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.block {
margin-top: 30px;
}
.collapse {
background-color: #eee;
padding: 30px 15px;
}
This is base on Bootstrap 4, the latest version.
When you set .collapse it first apply the bootstrap style of .collapse and after yours because that there is delay...
Use the id #collapseExample to style:
.block {
margin-top: 30px;
}
#collapseExample{
background-color: #eee;
padding: 30px 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT to your comment!
There's a "drag" when it closes.
Use jquery onclick the checkbox and apply padding as below:
fiddle here
$('.checkbox').on('click', function(){
if($('.collapse.show').length>0)
$('.collapse').css('padding','0');
else
$('.collapse').css('padding','30px 15px');
});
.block {
margin-top: 30px;
}
#collapseExample{
background-color: #eee;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I got it resolved. It's because I added the padding in parent div.
.block {
margin-top: 30px;
}
.block__collapse {
background-color: #eee;
padding: 30px 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="block__collapse">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am using some panel in my form. Its working fine in maximum panel but two panel is not working . The image will be given below . i write a panel code for these 4 checkbox (payment, deposit Voucher, cash, bank) and in the bottom finish button.
but this two panel didn't working.
How can i solve this problem ?
Code of my full form is given below :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Payment Deposit Voucher</title>
</head>
<body>
<div class="panel panel-default">
<div style="padding:25px; ">
<div class="container center_div">
<form action="" method="post" class="form">
<div class="col-sm-10">
<div class="form-group">
<div class="col-sm-12 panel panel-heading panel-success">PAYMENT DEPOSIT VOUCHER <span style="color:green">[DAFFODIL INTERNATIONAL UNIVERSITY]</span>
</div>
</div>
<div class="form-group">
<div class="panel panel-default">
<div class="col-sm-6" style="padding-bottom:5px;">
<input type="radio" name="voucher" value="payment_voucher">Payment Voucher
<input type="radio" name="voucher" value="deposit_voucher">Payment Voucher
</div>
<div class="col-sm-3"style="padding-bottom:5px;"></div>
<div class="col-sm-3" style="padding-bottom:5px;">
<input type="radio" name="transaction" value="cash">Cash
<input type="radio" name="transaction" value="bank">Bank
</div></div></div>
<div class="panel panel-default">
<div class="panel panel-body">
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Voucher ID:</label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="voucherid" id="voucherid"></div></div>
<div class="form-group">
<div class="col-sm-2"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Date :</label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="date" id="date">
</div></div><br>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Project : </label></div>
<div class="col-sm-10" style="padding-top:5px"><input type="text" class="form-control" name="project" id="project"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Department : </label></div>
<div class="col-sm-3" style="padding-top:5px"><select name="department" class="form-control">
<option value="Select">Select...</option>
<option value="SWE">SWE</option>
<option value="CSE">CSE</option>
<option value="EEE">EEE</option>
</select>
</div></div>
<div class="col-sm-2"></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Cash in Hand : </label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="cashinhand" id="cashinhand"> </div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Bank Account :</label></div>
<div class="col-sm-10" style="padding-top:5px"><input type="text" class="form-control" name="bankacc" id="bankacc"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Cheque No: </label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="chequeno" id="chequeno"></div></div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-2" style="padding-top:5px"><label>MR. No :</label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="mrno" id="mrno"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Control Head : </label></div>
<div class="col-sm-10" style="padding-top:5px"><input type="text" class="form-control" name="controllhead" id="controllhead"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Client :</label></div>
<div class="col-sm-10" style="padding-top:5px"><select name="client" class="form-control">
<option value="Select">Select...</option>
<option value="SWE">SWE</option>
<option value="CSE">CSE</option>
<option value="EEE">EEE</option>
</select> </div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Debit: </label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="debit" id="debit"></div></div>
<div class="form-group">
<div class="col-sm-2" ></div>
<div class="col-sm-2" style="padding-top:5px"><label>Credit : </label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="credit" id="credit"></div></div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-10">
<div class="panel panel-default">
<div class="showtable">
<table class="table">
<tr>
<th>ACCOUNT HEAD</th>
<th>DEBIT</th>
<th>CREDIT</th>
<th>CHEQUE</th>
<th>PROJECT NAME</th>
<th>MR. NO</th>
<th>DEPT NAME</th>
<th>CLIENT NAME</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-10">
<div class="panel panel-default">
<div class="col-sm-10"></div>
<div class="col-sm-2" style="padding-bottom:5px">
<input type="submit" class="btn btn-lg btn-success" name="finish" value="FINISH" id="finish"></div>
</div>
</div>
</body>
</html>
It is not entirely clear what you are trying to achieve and what is exactly the issue. If your issue is that you are not reliably getting a panel border around the areas you mention, This can be resolved by wrapping the radio buttons and finish buttons (individually) with
<div class="panel-body">
....
</div>
This jsfiddle demonstrates how this can be used https://jsfiddle.net/2qut3hx7/.
I'm trying to do that bootstrap model:
But the alignement isn't working well because there's a dropdown list (It's not all elements of the same type).
This is what I came for:
This is my fiddle:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="form-group">
<label class="col-xs-3 control label">Prefix:</label><br />
<div class="col-xs-5 selectContainer">
<select name="prefix" class="form-control">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
</div>
</div>
</div>
<div class="row">
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="fname" name="fname">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" class="form-control" id="lname" name="lname">
</div>
</div>
<div class="row">
<label for="suffix">Suffix:</label>
<input type="text" class="form-control" id="suffix" name="suffix">
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="info">Information:</label>
<textarea class="form-control" rows="4" id="info" name="info"></textarea>
</div>
</div>
</div>
</div>
</body>
</html>
How can I fix this alignment problem?
Try something like this: http://www.bootply.com/TvgQizWRZw
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<label for="prefix">Prefix</label>
<select name="prefix" class="form-control" id="prefix">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
</div>
<div class="col-md-6">
<label for="tbLastName">Last name</label>
<input type="text" class="form-control" id="tbLastName">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="tbFirstName">First Name</label>
<input type="text" class="form-control" id="tbFirstName">
</div>
<div class="col-md-6">
<label for="tbSuffix">Suffix</label>
<input type="text" class="form-control" id="tbSuffix">
</div>
</div>
</div>
<div class="col-md-4">
<label for="tbInfo">Information</label>
<textarea rows="4" cols="50" class="form-control" id="tbInfo">Test</textarea>
</div>
</div>
</div>
Can some one check my code and tell me why <br> tags aren't working after <textarea> tags <br> and why things messed up after the Date field?
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function(){
$('#dateRangePicker').datepicker({
format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
$('#dateRangeForm').formValidation('revalidateField', 'date');
});
});
</script>
</head>
<body>
<h1 align="center">Some text here</h1>
<div class="form-group">
<div class="col-sm-3">
<label>Full Name:</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px;"/>
</div><br><br>
<div class="col-sm-3">
<label>Father's Name:</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px;"/>
</div><br><br>
<div class="col-sm-3">
<label>Permanent Residential Address:</label>
</div>
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="comment" style="width:400px;"></textarea>
</div><br><br>
<div class="col-sm-3">
<label>Address for Communication:</label>
</div>
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="comment" style="width:400px;"></textarea>
</div><br><br>
<div class="col-sm-3">
<label>Date:</label>
</div>
<div class="col-sm-3 input-group input-append date" id="dateRangePicker">
<input type="text" class="form-control" name="date" style="width:400px;"/>
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div><br><br>
<div class="col-sm-3">
<label>Age as on Date:</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px;"/>
</div><br><br>
<div class="col-sm-3">
<label>Caste:</label>
</div>
<div class="col-sm-9">
<label>SC</label>
<input type="radio"/>   
<label>ST</label>
<input type="radio"/>   
<label>OBC</label>
<input type="radio"/>   
<label>GENERAL</label>
<input type="radio"/>
</div><br><br>
</body>
</html>
If you want to add spacing below an element (in this case ) you should really use CSS. It gives you a lot more control, and you can be more certain that different browsers have the same result.
Seeing as you're already using inline styles in this document, you could do it by saying
<div class="col-sm-9" style="margin-bottom: 20px;">
Generally inline styles is not a good idea - you should really have it in a seperate file, using classes and ID's but i assume you know that :)
Looked at the code and it seems as though you don't understand what the
<br>
tag is used for, but as explained here http://www.w3schools.com/tags/tag_br.asp it inserts a single line break. Hope that helped!
There are few modifications needed in your code.
Problem
<br> tag inserts line break which adds extra space between elements.
The Date field is getting misaligned because of incorrect use of input-group class.
There is no semicolon (;) after  . Correct syntax is
Solution
You can eliminate the need of <br> tags by wrapping each element inside form-group
To align Date, create a child container with class input-group.
is not needed. This is not the standard way of writing HTML. Use margin instead.
Have modified your code with above fixes. Check here
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function()
{
$('#dateRangePicker')
.datepicker(
{
format: 'dd/mm/yyyy',
})
.on('changeDate', function(e)
{
$('#dateRangeForm').formValidation('revalidateField', 'date');
});
});
</script>
</head>
<body>
<h1 align="center">Some text here</h1>
<div class="form-group">
<div class="col-sm-3">
<label>Full Name:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;" />
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Father's Name:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;" />
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Permanent Residential Address:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="comment" style="width:400px; margin-bottom: 10px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Address for Communication:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="comment" style="width:400px; margin-bottom: 10px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Date:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<div class="input-group input-append date" id="dateRangePicker">
<input type="text" class="form-control" name="date" style="width:400px; margin-bottom: 10px;" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Things messed up from here ------>
<div class="form-group">
<div class="col-sm-3">
<label>Age as on Date:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Caste:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<label>SC</label>
<input type="radio"/>   
<label>ST</label>
<input type="radio"/>   
<label>OBC</label>
<input type="radio"/>   
<label>GENERAL</label>
<input type="radio"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Educational Qualification:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Sports Event / Game:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<select class="form-control" id="usr" style="width:400px; margin-bottom: 10px;">
<option>Inspector of Income Tax</option>
<option>Tax Assistant</option>
<option>Stenographer-Gr. II</option>
<option>Multitasking Staff</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Details of Best Performance:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/>
</div>
</div>
</body>
</html>
Suppose I have the following HTML using Bootstrap to style:
<form class="form-horizontal">
<div class='container'>
<div class="row">
<div class="col-sm-3">
<div class='form-group'>
<label>First Name</label>
<input></input>
</div>
<div class='form-group'>
<label>Last Name</label>
<input></input>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<input type="checkbox"></input>
</div>
<div class='form-group'>
<input></input>
<input></input>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<input type="checkbox"></input>
</div>
<div class='form-group'>
<input></input>
<input></input>
</div>
</div>
</div>
</div>
</form>
You can see the code here. What I am trying to do is set up a even 3 x 3 matrix with the input(checkbox included) with position (1,1) missing.
In addition to this I want the labels to sit to the left of the text inputs and remain there without shifting to the top of the first set of inputs.
You could do this by setting a minimum width on form-group and using that class consistently across the columns. Because the size needed to keep the label next to the input, you'd also need to adjust the column width; use md instead of sm.
.form-group {
min-width: 20em;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class='container'>
<div class="row">
<div class="col-md-3">
<div class='form-group'><br /></div>
<div class='form-group'>
<label>First Name</label>
<input />
</div>
<div class='form-group'>
<label>Last Name</label>
<input />
</div>
</div>
<div class="col-md-3">
<div class='form-group'>
<input type="checkbox" />
</div>
<div class='form-group'>
<input />
</div>
<div class='form-group'>
<input />
</div>
</div>
<div class="col-md-3">
<div class='form-group'>
<input type="checkbox" />
</div>
<div class='form-group'>
<input />
</div>
<div class='form-group'>
<input />
</div>
</div>
</div>
</div>
</form>