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>
Related
I'm having issues with my last row not showing at all when I compile the program. I tried many things but there seems to be an issue with the Select element because what ever I try to add after the first Select row doesn't show up.
What am I missing?
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="~/css/OpenStore.css" asp-append-version="true" />
</head>
<p align="center" style="color:red">
Open Store
</p>
<div class="OpenStore">
<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype = "multipart/form-data">
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row col-md-13">
<label class="col-form-label col-md-6">Store # :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Store Name :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Language :</label>
<div class="col-sm-3">
<select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"/>
<datalist id="Languages">
<option data-value="English">English</option>
<option data-value="Fr">French</option>
</datalist>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Group :</label>
<div class="col-sm-3">
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"/>
<datalist id="Groups">
<option data-value="2">>Laura</option>
<option data-value="3">Melanie Lyne</option>
</datalist>
</div>
</div>
</div>
</div>
</form>
</div>
</html>
Here is what it looks like in chrome:
html render
The second <select> is not shown, because the closing </select> tag is missing. <select> tags are used with <option> tags inside them.
<select asp-for="LanguageId" class="form-control form-control-sm" id="Language"
style="width:100px">
<option data-value="English">English</option>
<option data-value="French">French</option>
</select>
The list attribute is not valid for select. If you want to use a datalist you should switch to <input> tags.
Please use the <select></select> instead of <select/>
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype="multipart/form-data">
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row col-md-13">
<label class="col-form-label col-md-6">Store # :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Store Name :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Language :</label>
<div class="col-sm-3">
<select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"></select>
<datalist id="Languages">
<option data-value="English">English</option>
<option data-value="Fr">French</option>
</datalist>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Group :</label>
<div class="col-sm-3">
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
<datalist id="Groups">
<option data-value="2">>Laura</option>
<option data-value="3">Melanie Lyne</option>
</datalist>
</div>
</div>
</div>
</div>
</form>
I am using bootstrap grid to make multiple input search filters, but on mobile device it's not responsive, any help appreciated.
I wanted to show form fields two in a row on mobile phone so that user can see labels and input search data correctly.
Desktop output: (works fine)
Mobile output: (needs to make responsive)
CODE
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<section class="section">
<div class="row">
<div class="col-md-12">
<form action="" method="post">
<section class="example">
<div class="row form-group">
<div class="col-2">
<label class="control-label">Date of Surgery</label>
<input type="date" name="date_of_surgery" class="form-control boxed">
</div>
<div class="col-2">
<label class="control-label">Hospital</label>
<input type="text" name="hospital" class="form-control" placeholder="Hospital name">
</div>
<div class="col-2">
<label class="control-label">Follow Up(from)</label>
<input type="date" name="date_from" class="form-control">
</div>
<div class="col-2">
<label class="control-label">To</label>
<input type="date" name="date_to" class="form-control">
</div>
<div class="col-2">
<label class="control-label">Diagnosis</label>
<input type="text" name="diagnosis" class="form-control">
</div>
<div class="col-2">
<label class="control-label">Surgery</label>
<input type="text" name="surgery" class="form-control">
</div>
</div>
</section>
<section class="example">
<div class="row form-group">
<div class="col-2">
<label class="control-label">Surgeon</label>
<input type="text" name="surgeon" class="form-control boxed" placeholder="Surgeon's Name">
</div>
<div class="col-2">
<label class="control-label">Assistant</label>
<input type="text" name="assistant" class="form-control" placeholder="Assistant's name">
</div>
<div class="col-2">
<label class="control-label">Anaesthetist</label>
<input type="text" name="anaesthetist" class="form-control" placeholder="Anaesthetist's name">
</div>
<div class="col-2">
<label class="control-label">Age (from)</label>
<input type="number" name="age_from" class="form-control" placeholder="Age From">
</div>
<div class="col-2">
<label class="control-label">To</label>
<input type="number" name="age_to" class="form-control" placeholder="Age To">
</div>
<div class="col-2">
<label for="sex" class="control-label">Sex</label>
<select name="sex" class="form-control">
<option selected="true" disabled="disabled">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
</div><br>
<div class="col-12">
<button type="submit" value="Search" name="search" class="btn btn-primary btn-lg btn-block"><li class="fa fa-search" area-hidden="true"></li> Search </button>
</div>
</form>
</section>
You just need to replace your col-2 by col-4 col-md-2 or col-6 col-sm-4 col-md-2.
Because if you apply col-2 all the devices will show the same front. Please read doc
Below an example with col-4 col-md-2:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<section class="section">
<div class="row">
<div class="col-md-12">
<form action="" method="post">
<section class="example">
<div class="row form-group">
<div class="col-4 col-md-2">
<label class="control-label">Date of Surgery</label>
<input type="date" name="date_of_surgery" class="form-control boxed">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Hospital</label>
<input type="text" name="hospital" class="form-control" placeholder="Hospital name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Follow Up(from)</label>
<input type="date" name="date_from" class="form-control">
</div>
<div class="col-4 col-md-2">
<label class="control-label">To</label>
<input type="date" name="date_to" class="form-control">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Diagnosis</label>
<input type="text" name="diagnosis" class="form-control">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Surgery</label>
<input type="text" name="surgery" class="form-control">
</div>
</div>
</section>
<section class="example">
<div class="row form-group">
<div class="col-4 col-md-2">
<label class="control-label">Surgeon</label>
<input type="text" name="surgeon" class="form-control boxed" placeholder="Surgeon's Name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Assistant</label>
<input type="text" name="assistant" class="form-control" placeholder="Assistant's name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Anaesthetist</label>
<input type="text" name="anaesthetist" class="form-control" placeholder="Anaesthetist's name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Age (from)</label>
<input type="number" name="age_from" class="form-control" placeholder="Age From">
</div>
<div class="col-4 col-md-2">
<label class="control-label">To</label>
<input type="number" name="age_to" class="form-control" placeholder="Age To">
</div>
<div class="col-4 col-md-2">
<label for="sex" class="control-label">Sex</label>
<select name="sex" class="form-control">
<option selected="true" disabled="disabled">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
</div><br>
<div class="col-12">
<button type="submit" value="Search" name="search" class="btn btn-primary btn-lg btn-block"><li class="fa fa-search" area-hidden="true"></li> Search </button>
</div>
</section>
</form>
</div>
</div>
</section>
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>
I Have the following bootstrap form broken into groups.
I am trying to add a checkbox but, it doesn't seem to left align correctly.
How can i make the check box left align and under the "Max Amount" ?
and i want to add radio button to the next group.
My Fiddle
<div class="panel panel-primary">
<div class="panel-heading"> Information</div>
<div class="panel-body">
<!---->
<fieldset>
<legend> Borrowing Power</legend>
<div class='row'>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password">Desired Amount</label>
<!--<input class="form-control" id="user_password" name="user[password]" size="30" type="password" /> -->
<input name="desiredamount" id="" class="form-control input-normal desiredLoan">
</div>
</div>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password_confirmation" class="">Max Loan Amount</label><br>
<input class="form-control pull-left" id="" name="" class="pull-left" type="checkbox" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div class='row'>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_title">Title</label>
<input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_email">Email</label>
<input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Options</legend>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_locale">Language</label>
<select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option>
<option value="en">English</option></select>
</div>
</div>
</div>
</fieldset>
<!---->
</div>
<div class="container-fluid"><!-- Row 2 -->
<!--
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="mobile">Mobile Phone</label>
<input name="mobile" id="mobile" class="form-control input-normal">
<p class="help-block">The users mobile phone number.</p>
</div>
</div>
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="level">User Access Level</label>
<select name="level" id="level" class="form-control input-normal">
<option value="1">1</item>
<option value="2">2</item>
</select>
<p class="help-block">The users system access level.</p>
</div>
</div> --->
<!---->
</div>
</div>
The problem is in form-control class which has width:100%
Solution
Add another class after form-control class
<input class="form-control auto-width pull-left" id="" name="" class="pull-left" type="checkbox" />
.auto-width {
width: auto;
}
Just try by removing "form-control" class from Checkbox
In this way I normally achieve it...just use column nesting
check the snippet I have nested class="col-sm-2" column inside class="col-sm-6" and added a margin-top
#check {
margin-top: -5px;
}
<!DOCTYPE html>
<html>
<head>
<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="panel panel-primary">
<div class="panel-heading"> Information</div>
<div class="panel-body">
<!---->
<fieldset>
<legend> Borrowing Power</legend>
<div class='row'>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password">Desired Amount</label>
<!--<input class="form-control" id="user_password" name="user[password]" size="30" type="password" /> -->
<input name="desiredamount" id="" class="form-control input-normal desiredLoan">
</div>
</div>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password_confirmation" class="">Max Loan Amount</label><br>
<div class='col-sm-2' id="check">
<input class="form-control pull-left" id="" name="" class="pull-left" type="checkbox" />
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div class='row'>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_title">Title</label>
<input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_email">Email</label>
<input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Options</legend>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_locale">Language</label>
<select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option>
<option value="en">English</option></select>
</div>
</div>
</div>
</fieldset>
<!---->
</div>
<div class="container-fluid"><!-- Row 2 -->
<!--
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="mobile">Mobile Phone</label>
<input name="mobile" id="mobile" class="form-control input-normal">
<p class="help-block">The users mobile phone number.</p>
</div>
</div>
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="level">User Access Level</label>
<select name="level" id="level" class="form-control input-normal">
<option value="1">1</item>
<option value="2">2</item>
</select>
<p class="help-block">The users system access level.</p>
</div>
</div> --->
<!---->
</div>
</div>
</body>
</html>
Hope this helps!
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>