Click here to Skip to main content
15,867,973 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I was working in custom new form using bootstrap.As I am new to this bootstrap I don't have an idea where to implement.I have tried some codes through div classes,but controls are not aligned properly.

I have to achieve like this design format using custom new form:

Label label
control control


Label label
control control

What I have tried:

<div class=" container">
		
		<div class="row">
		<div class="col-md-6 purchasedetialsR">
		<div  class="row form-group potitle">
		<div class=" col-sm-4">
		<label class="control-label">Title *</label>
			
			
		
		</div>
		<div class="col-sm-8">
		 <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
			<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
		
		</div>
		
		
		</div>
		<div class="row  form-group ponumber">
		<div class="col-sm-4">
		<label class="control-label">PONumber</label>
	
		</div>
		<div class="col-sm-8">
			<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="PONumber" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@PONumber')}"/>
		<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="PONumber" ControlMode="New"/>
		</div>
		
		
		</div> 
		
		</div>
		
<div class="col-md-6 purchasedetialsL">
		
	<div class=" row   form-group POdate">
		<div class="col-sm-4">
		<label class="control-label">PODate</label>
	
		</div>
		<div class="col-sm-8  podat">
		
			<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="PODate" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@PODate')}"/>
	    <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="PODate" ControlMode="New"/>
	   
				</div>
		
	 </div>
	 
	 <div class="row form-group potitle">
	 <div class="col-sm-4">

	 <label class="control-label">POtitle</label>

	 </div>
	 
	 <div class="col-sm-8">
	
	 	<SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="New" FieldName="POTitle" __designer:bind="{ddwrt:DataBind('i',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@POTitle')}"/>
							<SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="POTitle" ControlMode="New"/>
	 </div>
	 
	 </div>
  </div>
           
		</div>
	
		</div>
Posted
Updated 15-Jul-19 7:41am

1 solution

<div class=" container">
		
		<div class="row">
		<div class="col-md-6 purchasedetialsR">
		<div  class="row form-group potitle">
		<div class=" col-sm-4">
		<label class="control-label">Title *</label>
			
			
		
		</div>
		<div class="col-sm-8">
		 <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
			<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
		
		</div>
		
		
		</div>
		<div class="row  form-group ponumber">
		<div class="col-sm-4">
		<label class="control-label">PONumber</label>
	
		</div>
		<div class="col-sm-8">
			<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="PONumber" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@PONumber')}"/>
		<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="PONumber" ControlMode="New"/>
		</div>
		
		
		</div> 
		
		</div>
		
<div class="col-md-6 purchasedetialsL">
		
	<div class=" row   form-group POdate">
		<div class="col-sm-4">
		<label class="control-label">PODate</label>
	
		</div>
		<div class="col-sm-8  podat">
		
			<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="PODate" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@PODate')}"/>
	    <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="PODate" ControlMode="New"/>
	   
				</div>
		
	 </div>
	 
	 <div class="row form-group potitle">
	 <div class="col-sm-4">

	 <label class="control-label">POtitle</label>

	 </div>
	 
	 <div class="col-sm-8">
	
	 	<SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="New" FieldName="POTitle" __designer:bind="{ddwrt:DataBind('i',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@POTitle')}"/>
							<SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="POTitle" ControlMode="New"/>
	 </div>
	 
	 </div>
  </div>
           
		</div>
	
		</div>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900