html css doesn't work when add ng-app directive value - css

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>

Related

How to use multiple formgroup inside the form array

<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,
});

form error - bootstrap

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

Bootstrap form handling

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>

Bootswatch theme doesnt submit form data

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">

Automatically align checkboxes in a bootstrap inline form

I have the following code:
<form class="form-inline">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend>Form one</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input1">Input1</label>
<div class="checkbox">
<input type="checkbox" id="input1">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input2">Input2</label>
<div class="checkbox">
<input type="checkbox" id="input2">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input3">Input3</label>
<div class="checkbox">
<input type="checkbox" id="input3">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input4">Input4</label>
<div class="checkbox">
<input type="checkbox" id="input4">
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend>Form 2</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input5">Input5</label>
<div class="checkbox">
<input type="checkbox" id="input5">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input6">Input6</label>
<div class="checkbox">
<input type="checkbox" id="input6">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input7">Input7</label>
<div class="checkbox">
<input type="checkbox" id="input7">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input8">Input8</label>
<div class="checkbox">
<input type="checkbox" id="input9">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
( I am sorry for the poor identation, but i posted a link to bootply also). I want the inputs of the first form to appear two at each row, so it must look like this for form 1
Input1 input2
input3 input4
and
Input5 Input6
Input7 Input8
for form 2 in the second collumn. I set up two collumns both of them using col-md-6 class and in each collumn i am placing the fields. But even with setting two sub collumns of 3 I can't get the result I want. What am i doing wrong? I am using bootstrap 3

I think you want something like this
I changed col-md-3 to col-md-6.
If I didn't understand correctly, just tell me.

One solution is to clear the float at each point where you want to begin a new block. For example, like this:
<div style="clear:both;"><div></div></div>
Here is the modified code:
<form class="form-inline">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend>Form one</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input1">Input1</label>
<div class="checkbox">
<input id="input1" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input2">Input2</label>
<div class="checkbox">
<input id="input2" type="checkbox">
</div>
</div>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-3">
<div class="form-group">
<label for="input3">Input3</label>
<div class="checkbox">
<input id="input3" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input4">Input4</label>
<div class="checkbox">
<input id="input4" type="checkbox">
</div>
</div>
</div>
</fieldset>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-6">
<fieldset>
<legend>Form 2</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input5">Input5</label>
<div class="checkbox">
<input id="input5" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input6">Input6</label>
<div class="checkbox">
<input id="input6" type="checkbox">
</div>
</div>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-3">
<div class="form-group">
<label for="input7">Input7</label>
<div class="checkbox">
<input id="input7" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input8">Input8</label>
<div class="checkbox">
<input id="input9" type="checkbox">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>

Resources