dynamicweb/hosting/templates/hosting/pricing.html

  <div class="row white">
		<div class="block">

				{% for vm in vm_types %}
					<div class="row well pricing">
						<form class="form-inline p-green" role="form">
							<div class="btn-group col-md-3">
								<div class="form-group">
									
									<big>
										{{vm.hosting_company_name}}
									</big>

									<p>
										{{vm.description}}
									</p>
								</div>
							</div>					
							<div class="btn-group col-md-2">
								<div class="form-group">
								  <label for="cores">Cores:</label>
								  <select class="form-control" id="cores">
									{% with ''|center:10 as range %}
									{% for _ in range %}
									    <option>{{ forloop.counter }}</option>
									{% endfor %}
									{% endwith %}
								  </select>
								</div>
							</div>
							<div class="btn-group col-md-2">
								<label for="memory">Memory: </label>
								<div class="form-group">
								  
								  <select class="form-control short-input" id="memory">
									{% with ''|center:50 as range %}
									{% for _ in range %}
									    <option>{{ forloop.counter }}</option>
									{% endfor %}
									{% endwith %}
								  </select>
								  <span>GiB</span>
								</div>
							</div>
							<div class="form-group col-md-2">
								<label for="Disk Size">Disk Size: </label>
								<input class="form-control short-input" type="number" id="disk_space" min="0" value="0"/>
								<span>GiB</span>
							</div>
							<div class="col-md-2">
								<h3>$199</h3>
							</div>		
							<div class="col-md-1">
								<button type="submit" class="btn btn-default">Buy it</button>
							</div>								


						  <!-- <button type="submit" class="btn btn-default">Submit</button> -->


						</form>
					</div>
				{% endfor %}
				{% for vm in vm_types %}
					<div class="col-xs-12 col-sm-6 col-md-3">
						<form class="form-inline">
							<ul class="pricing {% cycle 'p-green' 'p-yel' 'p-red' 'p-blue' %}">
								<li style="height:200px;">
									<!-- <img src="http://bread.pp.ua/n/settings_g.svg" alt=""> -->
									<h3 >{{vm.hosting_company_name}}</h3>
								</li>
								<li>
									<!-- Single button -->
									<div class="btn-group">
										<div class="form-group">
										  <label for="cores">Cores: </label>
										  <select class="form-control cores-selector" id="{{vm.hosting_company}}-cores" data-vm-type="{{vm.hosting_company}}">
											{% with ''|center:10 as range %}
											{% for _ in range %}
											    <option>{{ forloop.counter }}</option>
											{% endfor %}
											{% endwith %}
										  </select>
										</div>
									</div>

								</li>
								<li class="row">
									<div class="btn-group">
										<div class="form-group">
										  <label for="memory">Memory: </label>
										  <select class="form-control memory-selector" id="{{vm.hosting_company}}-memory" data-vm-type="{{vm.hosting_company}}">
											{% with ''|center:50 as range %}
											{% for _ in range %}
											    <option>{{ forloop.counter }}</option>
											{% endfor %}
											{% endwith %}
										  </select>
										  <span>GiB</span>
										</div>
									</div>
								</li>						
								<li class="row">
									<div class="form-group">
										<label for="Disk Size">Disk Size: </label>
										<input class="form-control short-input disk-space-selector" type="number" id="{{vm.hosting_company}}-disk_space" min="1" value="1" data-vm-type="{{vm.hosting_company}}"/>
										<span>GiB</span>
									</div>
								</li>
								<li>
									<h3 id="{{vm.hosting_company}}-final-price">select</h3>
									<span>per month</span>
								</li>
								<li>
									<button>Buy it</button>
								</li>
							</ul>
						</form>
					</div>
				{% endfor %}

			
<!-- 
			<div class="col-xs-12 col-sm-6 col-md-3">
					<ul class="pricing p-yel">
						<li>
							<img src="http://bread.pp.ua/n/settings_y.svg" alt="">
							<big>Good</big>
						</li>
						<li>Responsive Design</li>
						<li>Color Customization</li>
						<li>HTML5 & CSS3</li>
						<li>Styled elements</li>
						<li>
							<h3>$299</h3>
							<span>per month</span>
						</li>
						<li>
							<button>Join Now</button>
						</li>
					</ul>
			</div>

			<div class="col-xs-12 col-sm-6 col-md-3">
					<ul class="pricing p-red">
						<li>
							<img src="http://bread.pp.ua/n/settings_r.svg" alt="">
							<big>Ultima</big>
						</li>
						<li>Responsive Design</li>
						<li>Color Customization</li>
						<li>HTML5 & CSS3</li>
						<li>Styled elements</li>
						<li>
							<h3>$399</h3>
							<span>per month</span>
						</li>
						<li>
							<button>Join Now</button>
						</li>
					</ul>
			</div>

			<div class="col-xs-12 col-sm-6 col-md-3">
					<ul class="pricing p-blue">
						<li>
							<img src="http://bread.pp.ua/n/settings_b.svg" alt="">
							<big>Vip</big>
						</li>
						<li>Responsive Design</li>
						<li>Color Customization</li>
						<li>HTML5 & CSS3</li>
						<li>Styled elements</li>
						<li>
							<h3>$799</h3>
							<span>per month</span>
						</li>
						<li>
							<button>Join Now</button>
						</li>
					</ul>
			</div> -->


				</div><!-- /block -->
			</div><!-- /row -->