I've a problem about the form handling in bootstrap. Could you help me?
So my problem is the spacing the elements, and i didn't find a good solution.
I tried horizontal form, but it drops the spans to a new line. Using gentella.
<body>
<div id="wrapper">
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Kalkulátor
</h1>
<!-- <ol class="breadcrumb">
<li>
<i class="fa fa-dashboard"></i> Dashboard
</li>
<li class="active">
<i class="fa fa-edit"></i> Forms
</li>
</ol> -->
</div>
</div>
<form class="form-inline" action="/kalkulator.php">
<div class="form-group">
<label class="control-label" for="hoszig1_nm">Input first:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="hoszig1_nm" placeholder="20">
</div>
<div class="form-group">
<span>/nm</span>
</div>
<div class="form-group">
<select class="form-control">
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
</select>
</div>
<div class="form-group">
<span>/cm</span>
</div>
<div class="form-group">
<select class="form-control">
<option>Normál</option>
<option>Grafit</option>
<option>Kőzetgyapot</option>
</select>
</div>
<div class="form-group">
<span>Típusú</span>
</div>
</br>
</br>
<div class="form-group">
<label class="control-label" for="hoszig1_nm">Other input:</label>
<input type="text" class="form-control" id="hoszig1_nm" placeholder="20">
</div>
<div class="form-group">
<span>/nm</span>
</div>
<div class="form-group">
<select class="form-control">
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
</select>
</div>
<div class="form-group">
<span>/cm</span>
</div>
<div class="form-group">
<select class="form-control">
<option>Normál</option>
<option>Grafit</option>
<option>Kőzetgyapot</option>
</select>
</div>
<div class="form-group">
<span>Típusú</span>
</div>
</br>
</br>
You could use row and col-xx-xx classes. Link to doc here.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br/>
<form class="form-inline" action="/kalkulator.php">
<div class="row">
<div class="form-group">
<div class="col-xs-4">
<label class="control-label" for="hoszig1_nm">Input first:</label>
</div>
<div class="col-xs-6">
<input type="text" class="form-control" id="hoszig1_nm" placeholder="20">
</div>
<div class="col-xs-2">
<span>/nm</span>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-offset-4 col-xs-6">
<select class="form-control">
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
</select>
</div>
<div class="col-xs-2">
<span>/cm</span>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-offset-4 col-xs-6">
<select class="form-control">
<option>Normál</option>
<option>Grafit</option>
<option>Kőzetgyapot</option>
</select>
</div>
<div class="col-xs-2">
<span>Típusú</span>
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<div class="form-group">
<div class="col-xs-4">
<label class="control-label" for="hoszig1_nm">Other input:</label>
</div>
<div class="col-xs-6">
<input type="text" class="form-control" id="hoszig1_nm" placeholder="20">
</div>
<div class="col-xs-2">
<span>/nm</span>
</div>
</div>
</div>
...
</form>
Here is an example of your code but the label shows at the end of the input field
<div class="form-group">
<label class="control-label" for="hoszig1_nm">Input first:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="hoszig1_nm" placeholder="20">
<label>/nm</label>
</div>
<div class="form-group">
<select class="form-control">
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
</select>
<span>/cm</span>
</div>
<div class="form-group">
<select class="form-control">
<option>Normál</option>
<option>Grafit</option>
<option>Kőzetgyapot</option>
</select>
<span>Típusú</span>
</div>
Related
<div formArrayName="partners" style="margin-top:15px;" *ngIf="partner">
<div *ngFor="let partner of partners().controls; let i = index" [formGroupName]="i">
<div class="partner-background">
<div class="row">
<div class="col col-12">
<h6 style="padding:5px;">Manage Partner <button id="remove" class="btn" style="float:right;" *ngIf="partners().length > 1 && i>0" (click)="removePartner(i)"><i class="fas fa-minus-circle"></i></button></h6>
</div>
<div class="col col-6">
<div class="input-group mb-3 mt-1">
<div class="input-group-prepend">
<span class="input-group-text">Full Name</span>
</div>
<input type="text" class="form-control" formControlName="p_first_name">
</div>
</div>
<div class="col col-6">
<div *ngFor="let type of types().controls; let j = index" [formGroupName]="j">
<div class="row" style="margin-top:5px;">
<div class="col col-3">
<label for="type" style="font-size:18px;">Type</label>
</div>
<div class="col col-4">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="partner" formControlName="p_type" style="width:16px;height:16px;" value="urban">
<label class="form-check-label">Urban</label>
</div>
</div>
<div class="col col-4">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="partner" formControlName="p_type" style="width:16px;height:16px;" value="rural">
<label class="form-check-label">Rural</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">DOB</span>
</div>
<input type="text" class="form-control" formControlName="p_dob">
</div>
</div>
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Sex</span>
</div>
<!-- <input type="text" class="form-control" formControlName="p_sex"> -->
<select class="form-control" formControlName="p_sex">
<option value="" selected>Select sex</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Email</span>
</div>
<input type="text" class="form-control" formControlName="p_email">
</div>
</div>
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Phone No</span>
</div>
<input type="text" class="form-control" formControlName="p_phone">
</div>
</div>
</div>
</div>
</div>
In most cases, you need to add multiple form controls inside one form group or multiple form controls inside the form array.
For checkbox, you need to add multiple form controls inside one formArray like this.
const arr = [this.fb.control(false), this.fb.control(false)];
fbArray = this.fb.array(arr);
const form = this.fb.group({
checkbox: fbArray,
});
I'm having some trouble with a form the last element doesn't fit properly, this is my code:
<div class="tab-pane" id="2a">
<div *ngFor="let perso of person">
<div class="form-group">
<label class="col-sm-4 control-label">Fecha de Ingreso:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.fecha_ini}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Fecha de Salida:</label>
<div class="col-sm-6">
<input type="text" name="condo" id="condo" value="{{perso.fecha_fin}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Foto:</label>
<div class="col-sm-6">
<!-- <input type="text" name="condo" value="{{perso.ruta_foto}}" class="form-control"> -->
<img src="http://52.14.193.170/imagenes/pers/2.jpg" alt="Odlir" width="130" height="130">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Antecedentes Penales:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.ruta_penal}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Antecedentes Policiales:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.ruta_policial}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Antecedentes Policiales:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.ruta_policial}}" class="form-control">
</div>
</div>
</div>
</div>
i don't know what i'm doing wrong, any ideas why this is happening? any help would be appreciated, im using bootstrap 3.3.7
It's still okay with
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va +PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
https://i.stack.imgur.com/zVa4B.png
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=mainapp&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463)
<body ng-app=""> It works when i didn't add value.
<body ng-app="mainapp"> It didn't work and give the above error.Also my css didn't work.
How can i fix it?Can someone help me?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="mainapp">
<div id="slidingDiv">
<section id="Proposal">
<div class="container cev2">
<div class="grid-1 ev">
<h1>Contact Information</h1>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="name" placeholder="Enter your full name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="phon">Ph no:</label>
<div class="col-sm-10">
<input type="phno" class="form-control" id="phno" placeholder="Enter your contact number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter your email address">
</div>
</div>
</form>
<!--
</div>
<div class="grid-1 ev">
-->
<h1>Event Information</h1>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="sel1">Type of Event</label>
<div class="col-sm-10">
<select class="form-control input-sm" id="sel1">
<option>Carrers</option>
<option>Dining</option>
<option>Meeting & Events</option>
<option>Reservations</option>
<option>Services & Facilities</option>
<option>Wedding & Engagement</option>
<option>Others</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="parti">Start Day</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="parti">End Day</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="sel1">Type of Desserts</label>
<div class="col-sm-10">
<select class="form-control input-sm" id="sel1" ng-model="myVar">
<option>None</option>
<option value="icecream">Icecream</option>
<option value="cake">Cake & Bakery</option>
<option value="rice">Fried chicken rice</option>
<option value="dan">Dan port</option>
<option value="myanmar">Myanmar rice and curry</option>
<option value="others">Others</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="parti">No of Participants</label>
<div class="col-sm-10">
<input type="parti" class="form-control" id="parti" placeholder="Enter Number of Participants" ng-model="parti">
</div>
</div>
<!--
<div class="form-group">
<label class="control-label col-sm-2" for="requirement">Other Requirements</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="comment" placeholder="Enter your requirement"></textarea>
</div>
</div>
-->
<button type="button" class="btn btn-success" id="submit">Submit</button>
</form>
</div>
<!-- Booking Summary -->
<div class="booking" id="booking">
<div class="grid-1 ev">
<div class="panel panel-default">
<div class="panel-heading">Booking Summary</div>
<div class="panel-body">
<div style="float: left; margin-left: 110px;">
<span>Hall</span><br>
<span>no of Days</span><br>
<span>Cash for Hall</span><br>
<div ng-switch="myVar">
<div ng-switch-when="icecream">
<span>IceCream</span><br>
</div>
<div ng-switch-when="cake">
<span>Cake & Bakery</span><br>
</div>
<div ng-switch-when="rice">
<span>Fried Chicken Rice</span><br>
</div>
<div ng-switch-when="dan">
<span>Dan Port</span><br>
</div>
<div ng-switch-when="myanmar">
<span>Myanmar Rice & Curry</span><br>
</div>
<div ng-switch-when="others">
<span>Others</span><br>
</div>
</div>
<span>No of participants</span><br>
<div ng-switch="myVar">
<div ng-switch-when="icecream">
<span>Cash for IceCream</span><br><br>
</div>
<div ng-switch-when="cake">
<span>Cash for Cake & Bakery</span><br><br>
</div>
<div ng-switch-when="rice">
<span>Cash for Fried Chicken Rice</span><br><br>
</div>
<div ng-switch-when="dan">
<span>Cash for Dan Port</span><br><br>
</div>
<div ng-switch-when="myanmar">
<span>Cash for Myanmar Rice & Curry</span><br><br>
</div>
<div ng-switch-when="others">
<span>Cash for Others</span><br><br>
</div>
</div>
<span>Total amount</span>
</div>
<div>
<span>500,000 kyats</span><br>
<span>$40</span><br>
<span>$40</span><br>
<div ng-switch="myVar">
<div ng-switch-when="icecream">
<span>1,500 kyats</span><br>
</div>
<div ng-switch-when="cake">
<span>3,500 kyats</span><br>
</div>
<div ng-switch-when="rice">
<span>4,000 kyats</span><br>
</div>
<div ng-switch-when="dan">
<span>4,000 kyats</span><br>
</div>
<div ng-switch-when="myanmar">
<span>4,500 kyats</span><br>
</div>
<div ng-switch-when="others">
<span>Others</span><br>
</div>
</div>
<span>{{parti}}</span><br>
<div ng-switch="myVar">
<div ng-switch-when="icecream">
<span>1,500*{{parti}} kyats</span><br>
</div>
<div ng-switch-when="cake">
<span>3,500*{{parti}} kyats</span><br>
</div>
<div ng-switch-when="rice">
<span>4,000 kyats</span><br>
</div>
<div ng-switch-when="dan">
<span>4,000 kyats</span><br>
</div>
<div ng-switch-when="myanmar">
<span>4,500 kyats</span><br>
</div>
<div ng-switch-when="others">
<span>Others</span><br>
</div>
</div>
<span>$40</span><br>
</div>
</div>
<button id="myBtn" type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" style="margin-bottom: 30px;">Confirm</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Confirmation box</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
The mainapp must be defined as an angular module somewhere in the JS you include in the index.html
When the document ready event occurs angular reads the DOM and looks for elements with an attribute of ng-app, for the first one it finds traversing the DOM it will try to create and run any .config blocks then any .run blocks and if you have a router configured the router will check the URL and load the appropriate templates and controllers (after any async resolves finish, if they are specified). In your case from what you shared no one can see where/if you defined the module that it's trying to start executing things for so it fails.
angular.module('mainapp',[])
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="mainapp">
<div id="slidingDiv">
<section id="Proposal">
<div class="container cev2">
<div class="grid-1 ev">
<h1>Contact Information</h1>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="name" placeholder="Enter your full name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="phon">Ph no:</label>
<div class="col-sm-10">
<input type="phno" class="form-control" id="phno" placeholder="Enter your contact number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter your email address">
</div>
</div>
</form>
<!--
</div>
<div class="grid-1 ev">
-->
<h1>Event Information</h1>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="sel1">Type of Event</label>
<div class="col-sm-10">
<select class="form-control input-sm" id="sel1">
<option>Carrers</option>
<option>Dining</option>
<option>Meeting & Events</option>
<option>Reservations</option>
<option>Services & Facilities</option>
<option>Wedding & Engagement</option>
<option>Others</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="parti">Start Day</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="parti">End Day</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="sel1">Type of Desserts</label>
<div class="col-sm-10">
<select class="form-control input-sm" id="sel1" ng-model="myVar">
<option>None</option>
<option value="icecream">Icecream</option>
<option value="cake">Cake & Bakery</option>
<option value="rice">Fried chicken rice</option>
<option value="dan">Dan port</option>
<option value="myanmar">Myanmar rice and curry</option>
<option value="others">Others</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="parti">No of Participants</label>
<div class="col-sm-10">
<input type="parti" class="form-control" id="parti" placeholder="Enter Number of Participants" ng-model="parti">
</div>
</div>
<!--
<div class="form-group">
<label class="control-label col-sm-2" for="requirement">Other Requirements</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="comment" placeholder="Enter your requirement"></textarea>
</div>
</div>
-->
<button type="button" class="btn btn-success" id="submit">Submit</button>
</form>
</div>
<!-- Booking Summary -->
<div class="booking" id="booking">
<div class="grid-1 ev">
<div class="panel panel-default">
<div class="panel-heading">Booking Summary</div>
<div class="panel-body">
<div style="float: left; margin-left: 110px;">
<span>Hall</span><br>
<span>no of Days</span><br>
<span>Cash for Hall</span><br>
<div ng-switch="myVar">
<div ng-switch-when="icecream">
<span>IceCream</span><br>
</div>
<div ng-switch-when="cake">
<span>Cake & Bakery</span><br>
</div>
<div ng-switch-when="rice">
<span>Fried Chicken Rice</span><br>
</div>
<div ng-switch-when="dan">
<span>Dan Port</span><br>
</div>
<div ng-switch-when="myanmar">
<span>Myanmar Rice & Curry</span><br>
</div>
<div ng-switch-when="others">
<span>Others</span><br>
</div>
</div>
<span>No of participants</span><br>
<div ng-switch="myVar">
<div ng-switch-when="icecream">
<span>Cash for IceCream</span><br><br>
</div>
<div ng-switch-when="cake">
<span>Cash for Cake & Bakery</span><br><br>
</div>
<div ng-switch-when="rice">
<span>Cash for Fried Chicken Rice</span><br><br>
</div>
<div ng-switch-when="dan">
<span>Cash for Dan Port</span><br><br>
</div>
<div ng-switch-when="myanmar">
<span>Cash for Myanmar Rice & Curry</span><br><br>
</div>
<div ng-switch-when="others">
<span>Cash for Others</span><br><br>
</div>
</div>
<span>Total amount</span>
</div>
<div>
<span>500,000 kyats</span><br>
<span>$40</span><br>
<span>$40</span><br>
<div ng-switch="myVar">
<div ng-switch-when="icecream">
<span>1,500 kyats</span><br>
</div>
<div ng-switch-when="cake">
<span>3,500 kyats</span><br>
</div>
<div ng-switch-when="rice">
<span>4,000 kyats</span><br>
</div>
<div ng-switch-when="dan">
<span>4,000 kyats</span><br>
</div>
<div ng-switch-when="myanmar">
<span>4,500 kyats</span><br>
</div>
<div ng-switch-when="others">
<span>Others</span><br>
</div>
</div>
<span>{{parti}}</span><br>
<div ng-switch="myVar">
<div ng-switch-when="icecream">
<span>1,500*{{parti}} kyats</span><br>
</div>
<div ng-switch-when="cake">
<span>3,500*{{parti}} kyats</span><br>
</div>
<div ng-switch-when="rice">
<span>4,000 kyats</span><br>
</div>
<div ng-switch-when="dan">
<span>4,000 kyats</span><br>
</div>
<div ng-switch-when="myanmar">
<span>4,500 kyats</span><br>
</div>
<div ng-switch-when="others">
<span>Others</span><br>
</div>
</div>
<span>$40</span><br>
</div>
</div>
<button id="myBtn" type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" style="margin-bottom: 30px;">Confirm</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Confirmation box</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
EDIT:
I have updated my demo on JsFiddle please have a look at it.
JSFiddle Demo
I'm not sure what is it that causing the space between inputs and you can see its very inconsistency and give space, what is it that is missing?
CodePen Demo
<div class="col-md-12">
<div class="tab-content">
<div class="tab-pane active cont" id="we">
<span style="float: right; padding: 4px 6px;"><a href='javascript:history.go(-1)'>Go Back to Previous Page</a> </span>
<span style="float: right; padding: 4px 6px;"><font color="red">*</font> Indicates required field</span>
<div class="cl-mcont">
<div class="row">
<div class="col-md-12">
<div class="block-flat">
<div class="page-head">
<h3>
Bootstrap Template
</h3>
</div>
<div class="content">
<form action="/xcel" class="form-horizontal data-parsley-validate" id="fForm" method="post">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Category</label>
<div class="col-sm-6">
<select class="select2" id="on" style="width:250px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Tier</label>
<div class="col-sm-6">
<select class="select2" id="tw" style="width:250px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Name</label>
<div class="col-sm-6">
<input class="form-control" id="te" placeholder=" Name" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Code</label>
<div class="col-sm-6">
<input class="form-control" id="df" name="ClientCode" placeholder=" Code" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Model</label>
<div class="col-sm-6">
<input class="form-control" id="adg" placeholder=" Model" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Center</label>
<div class="col-sm-6">
<input class="form-control" id="fd" placeholder=" Center" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Center</label>
<div class="col-sm-6">
<input class="form-control" id="sa" placeholder=" Center" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Name</label>
<div class="col-sm-6">
<input class="form-control" id="aeh" placeholder=" Name" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
CI </label>
<div class="col-sm-6">
<input class="form-control" id="he" placeholder="CI " type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Production </label>
<div class="col-sm-6">
<input class="form-control" id="jg" placeholder="Production IP" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Action</label>
<div class="col-sm-6">
<select class="select2" id="lk" style="width:250px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Description</label>
<div class="col-sm-6">
<input class="form-control" id="ui" placeholder=" Description" type="text" value="" />
</div>
</div>
</div>
<div style='clear: both'>
</div>
<div style='clear: both'>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Physical </label>
<div class="col-sm-6">
<select class="select2" id="lj" style="width:250px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Read</label>
<div class="col-sm-6">
<input class="form-control" id="io" placeholder=" Read" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Write</label>
<div class="col-sm-6">
<input class="form-control" id="po" placeholder=" Write" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Test</label>
<div class="col-sm-6">
<select class="select2" id=".j" style="width:265px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
</div>
<div class="form-group"> </div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have two .col-md-6 elements of unequal height.
The next (third) .col-md-6 will always go on the next row, starting from under the tallest of the previous siblings.
If you want to remove that space, you need to make the first .col-md-6 equal in height with the second one, by adding more padding around its inner elements (the .select2s).
UPDATE. One more thing I am noticing: in order to benefit the most from bootstrap's CSS you should stick to its' markup. You are supposed to place .col-XX-Y as direct children of .row or .row-fluid elements. Otherwise you will ask yourself why certain elements seem miss-aligned and it they will be a pain to fix at different responsive levels.
As per comments, I updated your fiddle.
In order to make the two columns equal I made the select2s equal in height as the bootstrap inputs:
.select2-container .select2-selection--single {
height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 34px;
}
.select2-container {
width: 100% !important;
}
Please take note I also removed some inline styling from your html, it's not only the CSS.
I have the lumen theme from bootswatch... everything seems to be working fine except that my form never submits any data ... it goes to the action page but never send any data across... he is the complete code...
<!DOCTYPE html>
<html>
<title>Some Title
</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="container">Some Heading</h1>
</div>
<div class="bs-component">
<div class="jumbotron">
<h1>Incident Management System</h1>
<p> Some heading</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Submit a ticket</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" id="insertForm" method="post" action="addincident.php">
<fieldset>
<legend>We need few details!</legend>
<div class="form-group">
<label for="inputUserName" class="col-lg-2 control-label">Username</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputUserName" placeholder="Enter your username">
</div>
</div>
<div class="form-group">
<label for="inputstudentID" class="col-lg-2 control-label">Student ID</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputStudentID" placeholder="Enter your Student ID">
</div>
</div>
<div class="form-group">
<label for="inputStudentEmail" class="col-lg-2 control-label">Student EMail</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputStudentEMail" placeholder="Enter your Student Email ID">
</div>
</div>
<div class="form-group">
<label for="selectRoomNo" class="col-lg-2 control-label">Room Number</label>
<div class="col-lg-10">
<select class="form-control" id="selectRoomNo">
<option>S114D</option>
<option>S118B</option>
<option>S118E</option>
<option>S120</option>
<option>S114B</option>
</select>
</div>
</div>
<div class="form-group">
<label for="textAreaRoomPosition" class="col-lg-2 control-label">Location of machine</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textAreaRoomPosition"></textarea>
<span class="help-block">Explain to the best of your knowledge the location of the issue in the lab.</span>
</div>
</div>
<div class="form-group">
<label for="textAreaRoomPosition" class="col-lg-2 control-label">Issue\Incident</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textAreaRoomPosition"></textarea>
<span class="help-block">Explain to the best of your knowledge the issue you are facing. Try to be as detailed as possible.</span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Information</h3>
</div>
<div class="panel-body">
Upon recieving the ticket, we will assign it to a designated technician who will then solve the case. You can view the solution of the incident once it is posted.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's missing the "name" attribute;
change this:
<input type="text" id="inputUserName">
to something like this:
<input type="text" name="inputUserName" id="inputUserName">