Как создать адаптивный веб-дизайн с помощью bootstrap в sharepoint list new form.aspx

---

Я работал в пользовательской новой форме, используя bootstrap.Поскольку я новичок в этом бутстрапе, у меня нет идеи, где его реализовать.Я пробовал некоторые коды через классы div,но элементы управления не выровнены должным образом.

Я должен достичь такого формата дизайна, используя пользовательскую новую форму:

Ярлыка
управления


Ярлыка
управления

Что я уже пробовал:

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

---