<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Hello, world!</title>
</head>
<body>
<div id="packageform">
<img class="arrow-select-shipping js-lazy-image js-lazy-image--handled" data-src="assets/img/en/arrow-select-shipping.png" alt="porto priser" src="assets/img/en/arrow-select-shipping.png">
<ul class="nav nav-tabs nav-form font-bold" role="tablist">
<li id="active" class="col-3 col-lg-2">
<a id="package-tab" class="active" data-toggle="tab" href="#package" role="tab" aria-controls="home" aria-selected="true">Package</a>
</li>
<li class="col-3 col-lg-2">
<a id="pallet-tab" data-toggle="tab" href="#pallet" role="tab" aria-controls="home" aria-selected="false">Pallet</a>
</li>
<li class="col-3 col-lg-2">
<a id="container-tab" data-toggle="tab" href="#container" role="tab" aria-controls="home" aria-selected="false">Container</a>
</li>
<li class="col-3 col-lg-2">
<a id="document-tab" data-toggle="tab" href="#document" role="tab" aria-controls="home" aria-selected="false">Document</a>
</li>
</ul>
<div class="tab-content">
<div class="form-wrap tab-pane fade show active no-details" id="package" role="tabpanel" aria-labelledby="package-tab">
<form action="results-simple.php" method="POST" class="">
<input type="hidden" name="type" value="package">
<div class="details-address pr-0">
<div class="row col-12">
<div class="col-12 col-lg-5 pr-0">
<div class="row addressbook">
<div class="col-lg-2 col-md-1 "><span class="d-block d-md-none" style="font-weight: 900;">
From </span></div>
</div>
<div class="row">
<div class="col-lg-2 col-md-1 align-middle pt-md-4 mt-md-2"><span class="d-none d-md-block" style="font-weight: 900;">
From </span></div>
<div class="form-group col-md-6 col-sm-7">
<label for="package-input-origin">Country</label>
<input name="origin_country_input" type="text" id="package-input-origin" value="Sverige" class="ui-autocomplete-input" autocomplete="off"><input type="hidden" name="origin_country" id="package-input-origin-value" value="203"></div>
<div class="form-group col-lg-4 col-md-5 col-sm-5">
<label for="package-from_postcode">Postal Code</label>
<input type="text" class="origin_postcode" id="package-origin_postcode" name="origin_postcode">
</div>
</div>
</div>
<div class="col-12 col-lg-5 pr-0">
<div class="row addressbook">
<div class="col-lg-2 col-md-1 "><span class="d-block d-md-none" style="font-weight: 900;">
To </span></div>
</div>
<div class="row">
<div class="col-lg-2 col-md-1 align-middle pt-md-4 mt-md-2"><span class="d-none d-md-block" style="font-weight: 900;">
To </span></div>
<div class="form-group col-md-6 col-sm-7">
<label for="package-input-destination">Country</label>
<input name="delivery_country_input" type="text" id="package-input-destination" value="Sverige" class="ui-autocomplete-input" autocomplete="off"><input type="hidden" name="delivery_country" id="package-input-destination-value" value="203"></div>
<div class="form-group col-lg-4 col-md-5 col-sm-5">
<label for="package-delivery_postcode">Postal Code</label>
<input type="text" class="delivery_postcode" id="package-delivery_postcode" name="delivery_postcode">
</div>
</div>
</div>
<div class="col-12 col-lg-2">
<div class="col-12 switch-lever" style="display:none">
<label for="package-delivery_postcode" style="margin-bottom: 3px">Receiver Address</label>
<input type="checkbox" name="residentialIndicatorDestination" value="1">
<span aria-hidden="true">
<span>Business</span>
<span class="switch-bg"></span>
<span>Private</span>
</span>
</div>
<div class="find-price " style="max-width: none;">
<button>Find your price</button>
<p>Prices from 59 kr,-</p>
</div>
</div>
</div>
</div>
<!--
<div class="details-address">
<div class="col-lg-10">
<div class="row small-gutters">
<div class="headline">\o/</div>
<div class="form-group col-9 col-lg-5">
<label>Gemte Adresser</label>
<input type="text" placeholder="Adressbog">
</div>
<div class="headline"><h5>From</h5></div>
<div class="form-group col-6 col-lg-3">
<label for="package-input-origin">Country</label>
<select id="package-input-origin" name="origin_country_id-input"></select>
</div>
<div class="form-group col-3 col-lg-2">
<label for="package-from_postcode">Postal Code</label>
<input type="text" class="origin_postcode" id="package-origin_postcode" name="origin_postcode">
</div>
<div class="headline">\o/</div>
<div class="form-group col-9 col-lg-5">
<label>Gemte Adresser</label>
<input type="text" placeholder="Adressbog">
</div>
<div class="headline"><h5>To</h5></div>
<div class="form-group col-6 col-lg-3">
<label for="package-input-destination">Country</label>
<select id="package-input-destination" name="shipping_country_id-input"></select>
</div>
<div class="form-group col-3 col-lg-2">
<label for="package-delivery_postcode">Postal Code</label>
<input type="text" class="delivery_postcode" id="package-delivery_postcode" name="delivery_postcode">
</div>
</div>
</div>
<div class="find-price">
<button>Find your price</button>
<p>Prices from 59 kr,-</p>
</div>
</div>
-->
<div class="details-packages">
<div class="details-types">
<div class="col-12">
<h6>Type of shipment</h6>
</div>
<div class="col-lg-12">
<div class="row">
<div class="item-type" data-subtype="fladkasse" data-dims="33|23|4" data-weight="1">
<img class="js-lazy-image" data-src="assets/img/shipment-types-icons/flat.png" alt="pakke pris">
<p>Thin Box<br>33 x 23 x 4 CM<br>Up to 1 KG</p>
<!--<input type="radio" name="type" value="3">-->
</div>
<div class="item-type" data-subtype="posekasse" data-dims="33|23|6" data-weight="2">
<img class="js-lazy-image" data-src="assets/img/shipment-types-icons/bag.png" alt="billig fragt">
<p>Small Box<br>33 x 23 x 6 CM<br>Up to 2 KG</p>
<!--<input type="radio" name="type" value="5">-->
</div>
<div class="item-type" data-subtype="almkasse" data-dims="40|25|20" data-weight="4">
<img class="js-lazy-image" data-src="assets/img/shipment-types-icons/packet.png" alt="pakken">
<p>Ord. Box<br>40 x 25 x 20 CM<br>Up to 4 KG</p>
<!--<input type="radio" name="type" value="1">-->
</div>
<div class="item-type" data-subtype="flyttekasse" data-dims="70|40|40" data-weight="25">
<img class="js-lazy-image" data-src="assets/img/shipment-types-icons/storagebox.png" alt="forsendelse">
<p>Moving Box<br>70 x 40 x 40 CM<br>Up to 25 KG</p>
<!--<input type="radio" name="type" value="2">-->
</div>
<div class="item-type" data-subtype="rorkasse" data-dims="90|10|10" data-weight="2">
<img class="js-lazy-image" data-src="assets/img/shipment-types-icons/tube.png" alt="transport">
<p>Rør<br>Up to 2 KG</p>
<!--<input type="radio" name="type" value="4">-->
</div>
<div class="item-type" id="package-custom-size" data-subtype="custompakke" data-dims="" data-weight="1">
<img class="js-lazy-image" data-src="assets/img/shipment-types-icons/questionmark.png" alt="fragtmand">
<p>Define Your Sizes</p>
<!--<input type="radio" name="type" value="6">-->
</div>
</div>
</div>
</div>
<div class="details-types" id="details-types-package-custom-size" style="display: none;">
<div class="col-12">
<h6>Select sizes</h6>
</div>
<div class="col-lg-12 d-none package-form item-line" id="clone-package-custom-group">
<div class="row">
<div class="col-lg-5 col-12">
<div class="row small-gutters">
<div class="form-group col-1 col-lg-1">
<div class="d-none remove-line"><span class="fa fa-trash pt-4 mt-2" title="Remove Line"></span></div>
</div>
<div class="form-group col-4 col-lg-5">
<label for="antal">Units</label>
<input type="number" name="qty[]" min="1" class="form-control">
</div>
<div class="form-group col-7 col-lg-6">
<label for="antal">Weight (max) per unit <span data-toggle="tooltip" data-placement="bottom" title="" class="fa fa-question-circle" data-original-title="Everything less than 1 kg is rounded up and belongs to the weight category 1 kg, which is the cheapest."></span></label>
<div class="input-group">
<input type="number" name="weight[]" class="form-control" min="0.5" step="0.5">
<div class="input-group-append"><span class="input-group-text">Kg</span></div>
</div>
</div>
</div>
</div>
<div class="col-lg-7 col-12">
<div class="row small-gutters">
<div class="form-group col-md-4 col-xs-12">
<label for="antal">Length (max)</label>
<div class="input-group">
<input type="number" name="length[]" class="form-control" min="1">
<div class="input-group-append"><span class="input-group-text">Cm</span></div>
</div>
</div>
<div class="form-group col-md-4 col-xs-12">
<label for="antal">Width (max)</label>
<div class="input-group">
<input type="number" name="width[]" class="form-control" min="1">
<div class="input-group-append"><span class="input-group-text">Cm</span></div>
</div>
</div>
<div class="form-group col-md-4 col-xs-12">
<label for="antal">Height (max)</label>
<div class="input-group">
<input type="number" name="height[]" class="form-control" min="1">
<div class="input-group-append"><span class="input-group-text">Cm</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="clone-package-container" class="middle-spacer">
<div class="col-lg-12 package-form item-line">
<div class="row">
<div class="col-lg-5 col-12">
<div class="row small-gutters">
<div class="form-group col-1 col-lg-1">
<div class="d-none remove-line"><span class="fa fa-trash pt-4 mt-2" title="Remove Line"></span></div>
</div>
<div class="form-group col-4 col-lg-5">
<label for="antal">Units</label>
<input type="number" name="qty[]" min="1" class="form-control">
</div>
<div class="form-group col-7 col-lg-6">
<label for="antal">Weight (max) per unit <span data-toggle="tooltip" data-placement="bottom" title="" class="fa fa-question-circle" data-original-title="Everything less than 1 kg is rounded up and belongs to the weight category 1 kg, which is the cheapest."></span></label>
<div class="input-group">
<input type="number" name="weight[]" class="form-control" min="0.5" step="0.5">
<div class="input-group-append"><span class="input-group-text">Kg</span></div>
</div>
</div>
</div>
</div>
<div class="col-lg-7 col-12">
<div class="row small-gutters">
<div class="form-group col-md-4 col-xs-12">
<label for="antal">Length (max)</label>
<div class="input-group">
<input type="number" name="length[]" class="form-control" min="1">
<div class="input-group-append"><span class="input-group-text">Cm</span></div>
</div>
</div>
<div class="form-group col-md-4 col-xs-12">
<label for="antal">Width (max)</label>
<div class="input-group">
<input type="number" name="width[]" class="form-control" min="1">
<div class="input-group-append"><span class="input-group-text">Cm</span></div>
</div>
</div>
<div class="form-group col-md-4 col-xs-12">
<label for="antal">Height (max)</label>
<div class="input-group">
<input type="number" name="height[]" class="form-control" min="1">
<div class="input-group-append"><span class="input-group-text">Cm</span></div>
</div>
</div>
</div>
</div>
</div>
</div></div>
<div class="add-other ml-0">
<button type="button" data-group="clone-package-custom-group" data-container="clone-package-container" style="font-weight:bold"><div class="icon"></div>Add more items</button>
</div>
</div>
<div class="find-price">
<button type="submit">Find your price</button>
<p>Prices from 59 kr,-</p>
</div>
</div>
</form>
</div>
<div class="form-wrap tab-pane fade no-details" id="pallet" role="tabpanel" aria-labelledby="pallet-tab">
<form action="results-simple.php" method="POST" class="">
<input type="hidden" name="type" value="pallet">
<div class="details-address pr-0">
<div class="row col-12">
<div class="col-12 col-lg-5 pr-0">
<div class="row addressbook">
<div class="col-lg-2 col-md-1 "><span class="d-block d-md-none" style="font-weight: 900;">
From </span></div>
</div>
<div class="row">
<div class="col-lg-2 col-md-1 align-middle pt-md-4 mt-md-2"><span class="d-none d-md-block" style="font-weight: 900;">
From </span></div>
<div class="form-group col-md-6 col-sm-7">
<label for="pallet-input-origin">Country</label>
<input name="origin_country_input" type="text" id="pallet-input-origin" value="Sverige" class="ui-autocomplete-input" autocomplete="off"><input type="hidden" name="origin_country" id="pallet-input-origin-value" value="203"></div>
<div class="form-group col-lg-4 col-md-5 col-sm-5">
<label for="pallet-from_postcode">Postal Code</label>
<input type="text" class="origin_postcode" id="pallet-origin_postcode" name="origin_postcode">
</div>
</div>
</div>
<div class="col-12 col-lg-5 pr-0">
<div class="row addressbook">
<div class="col-lg-2 col-md-1 "><span class="d-block d-md-none" style="font-weight: 900;">
To </span></div>
</div>
<div class="row">
<div class="col-lg-2 col-md-1 align-middle pt-md-4 mt-md-2"><span class="d-none d-md-block" style="font-weight: 900;">
To </span></div>
<div class="form-group col-md-6 col-sm-7">
<label for="pallet-input-destination">Country</label>
<input name="delivery_country_input" type="text" id="pallet-input-destination" value="Sverige" class="ui-autocomplete-input" autocomplete="off"><input type="hidden" name="delivery_country" id="pallet-input-destination-value" value="203"></div>
<div class="form-group col-lg-4 col-md-5 col-sm-5">
<label for="pallet-delivery_postcode">Postal Code</label>
<input type="text" class="delivery_postcode" id="pallet-delivery_postcode" name="delivery_postcode">
</div>
</div>
</div>
<div class="col-12 col-lg-2">
<div class="col-12 switch-lever" style="display:none">
<label for="pallet-delivery_postcode" style="margin-bottom: 3px">Receiver Address</label>
<input type="checkbox" name="residentialIndicatorDestination" value="1">
<span aria-hidden="true">
<span>Business</span>
<span class="switch-bg"></span>
<span>Private</span>
</span>
</div>
<div class="find-price " style="max-width: none;">
<button>Find your price</button>
<p>Prices from 59 kr,-</p>
</div>
</div>
</div>
</div>
<!--
<div class="details-address">
<div class="col-lg-10">
<div class="row small-gutters">
<div class="headline">\o/</div>
<div class="form-group col-9 col-lg-5">
<label>Gemte Adresser</label>
<input type="text" placeholder="Adressbog">
</div>
<div class="headline"><h5>From</h5></div>
<div class="form-group col-6 col-lg-3">
<label for="pallet-input-origin">Country</label>
<select id="pallet-input-origin" name="origin_country_id-input"></select>
</div>
<div class="form-group col-3 col-lg-2">
<label for="pallet-from_postcode">Postal Code</label>
<input type="text" class="origin_postcode" id="pallet-origin_postcode" name="origin_postcode">
</div>
<div class="headline">\o/</div>
<div class="form-group col-9 col-lg-5">
<label>Gemte Adresser</label>
<input type="text" placeholder="Adressbog">
</div>
<div class="headline"><h5>To</h5></div>
<div class="form-group col-6 col-lg-3">
<label for="pallet-input-destination">Country</label>
<select id="pallet-input-destination" name="shipping_country_id-input"></select>
</div>
<div class="form-group col-3 col-lg-2">
<label for="pallet-delivery_postcode">Postal Code</label>
<input type="text" class="delivery_postcode" id="pallet-delivery_postcode" name="delivery_postcode">
</div>
</div>
</div>
<div class="find-price">
<button>Find your price</button>
<p>Prices from 59 kr,-</p>
</div>
</div>
-->
<div class="details-packages">
<div class="details-types">
<div class="col-12">
<h6>Type of shipment</h6>
</div>
<div class="col-lg-12">
<div class="row">
<div class="item-type" id="palletFull" data-subtype="pallet">
<img class="js-lazy-image" data-src="assets/img/shipment-types-icons/pallet-full.png" alt="kurer">
<p>En hel palle</p>
<!--<input type="radio" name="type" value="1">-->
</div>
<div class="item-type" id="palletHalf" data-subtype="half-pallet">
<img class="js-lazy-image" data-src="assets/img/shipment-types-icons/halvpalle.png" alt="container">
<p>En halv palle</p>
<!--<input type="radio" name="type" value="2">-->
</div>
<div class="item-type" id="palletPieces" data-subtype="oversize">
<img class="js-lazy-image" data-src="assets/img/shipment-types-icons/pallet-pieces.png" alt="palle">
<p>General cargo/groupage</p>
<!--<input type="radio" name="type" value="3">-->
</div>
</div>
</div>
</div>
<div class="col-12">
<hr>
</div>
<div class="details-types">
<div class="col-lg-12 d-none item-line" id="clone-pallet-custom-group">
<div class="row">
<div class="col-lg-4">
<div class="row small-gutters">
<div class="form-group col-1 col-lg-1">
<div class="d-none remove-line"><span class="fa fa-trash pt-4 mt-2" title="Remove Line" style="position: relative; left: -10px"></span></div>
</div>
<div class="form-group col-3 col-lg-5">
<label for="antal">Units</label>
<input type="number" class="palletQty" name="qty[]" min="1">
</div>
<div class="form-group col-8 col-lg-6">
<label for="antal">Weight (max) per unit </label>
<div class="input-group">
<input type="number" class="palletWeight form-control" name="weight[]" min="1">
<div class="input-group-append"><span class="input-group-text">Kg</span></div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row small-gutters">
<div class="form-group col-4">
<label for="antal">Length (max)</label>
<div class="input-group">
<input type="number" class="palletLength form-control" name="length[]" min="1">
<div class="input-group-append"><span class="input-group-text">Cm</span></div>
</div>
</div>
<div class="form-group col-4">
<label for="antal">Width (max)</label>
<div class="input-group">
<input type="number" class="palletWidth form-control" name="width[]" min="1">
<div class="input-group-append"><span class="input-group-text">Cm</span></div>
</div>
</div>
<div class="form-group col-4">
<label for="antal">Height (max)</label>
<div class="input-group">
<input type="number" class="palletHeight form-control" name="height[]" min="1" max="250">
<div class="input-group-append"><span class="input-group-text">Cm</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="clone-pallet-container" class="middle-spacer">
<div class="col-lg-12 item-line">
<div class="row">
<div class="col-lg-4">
<div class="row small-gutters">
<div class="form-group col-1 col-lg-1">
<div class="d-none remove-line"><span class="fa fa-trash pt-4 mt-2" title="Remove Line" style="position: relative; left: -10px"></span></div>
</div>
<div class="form-group col-3 col-lg-5">
<label for="antal">Units</label>
<input type="number" class="palletQty" name="qty[]" min="1">
</div>
<div class="form-group col-8 col-lg-6">
<label for="antal">Weight (max) per unit </label>
<div class="input-group">
<input type="number" class="palletWeight form-control" name="weight[]" min="1">
<div class="input-group-append"><span class="input-group-text">Kg</span></div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row small-gutters">
<div class="form-group col-4">
<label for="antal">Length (max)</label>
<div class="input-group">
<input type="number" class="palletLength form-control" name="length[]" min="1">
<div class="input-group-append"><span class="input-group-text">Cm</span></div>
</div>
</div>
<div class="form-group col-4">
<label for="antal">Width (max)</label>
<div class="input-group">
<input type="number" class="palletWidth form-control" name="width[]" min="1">
<div class="input-group-append"><span class="input-group-text">Cm</span></div>
</div>
</div>
<div class="form-group col-4">
<label for="antal">Height (max)</label>
<div class="input-group">
<input type="number" class="palletHeight form-control" name="height[]" min="1" max="250">
<div class="input-group-append"><span class="input-group-text">Cm</span></div>
</div>
</div>
</div>
</div>
</div>
</div></div>
<div class="col-lg-12 d-none" id="palletPickupOptions">
<div class="row">
<div class="col-lg-6 radio-group pallet-pickup-options"><div class="form-control">
<h6>Origin</h6>
<label style="display: block">
<input type="radio" name="pallet_pickup_private" value="1">Private <i class="fa fa-question-circle" data-toggle="tooltip" style="color: #474747; float: right" title="" data-original-title="The sender address is a PRIVATE address"></i>
</label>
<label style="display: block;">
<input type="radio" name="pallet_pickup_private" value="0">Business <i class="fa fa-question-circle" data-toggle="tooltip" style="color: #474747; float: right" title="" data-original-title="The sender address is a company address"></i>
</label>
</div></div>
<div class="col-lg-6 radio-group pallet-delivery-options"><div class="form-control">
<h6>Delivery</h6>
<label style="display: block">
<input type="radio" name="pallet_delivery_private" value="1">Private <i class="fa fa-question-circle" data-toggle="tooltip" style="color: #474747; float: right" title="" data-original-title="Recipient is a private address"></i>
</label>
<label style="display: block;">
<input type="radio" name="pallet_delivery_private" value="0">Business <i class="fa fa-question-circle" data-toggle="tooltip" style="color: #474747; float: right" title="" data-original-title="Recipient is a company"></i>
</label>
</div></div>
</div>
<div class="row">
<div class="col-12 col-12-lg radio-group pallet-stackable-options"><div class="form-control">
<label style="display: block">
<input type="radio" name="pallet_stackable" value="1" class="px-2">Stackable <i class="fa fa-question-circle" data-toggle="tooltip" style="color: #474747; float: right" title="" data-original-title="Can goods be stacked on top of your shipment"></i>
</label>
<label style="display:block">
<input type="radio" name="pallet_stackable" value="0" class="px-2">Not stackable <i class="fa fa-question-circle" data-toggle="tooltip" style="color: #474747; float: right" title="" data-original-title="Your shipment does NOT accept goods stacked on top"></i>
</label>
</div>
</div>
</div>
</div>
<div class="add-other ml-0">
<button type="button" data-group="clone-pallet-custom-group" data-container="clone-pallet-container"><div class="icon"></div>Send andre paller</button>
</div>
</div>
<div class="find-price">
<button type="submit">Find your price</button>
<p>Prices from 59 kr,-</p>
</div>
</div>
</form>
</div>
<div class="form-wrap tab-pane fade no-details" id="container" role="tabpanel" aria-labelledby="container-tab">
<form action="results-simple.php" method="POST" class="">
<input type="hidden" name="type" value="container">
<div class="details-address pr-0">
<div class="row col-12">
<div class="col-12 col-lg-5 pr-0">
<div class="row addressbook">
<div class="col-lg-2 col-md-1 "><span class="d-block d-md-none" style="font-weight: 900;">
From </span></div>
</div>
<div class="row">
<div class="col-lg-2 col-md-1 align-middle pt-md-4 mt-md-2"><span class="d-none d-md-block" style="font-weight: 900;">
From </span></div>
<div class="form-group col-md-6 col-sm-7">
<label for="container-input-origin">Country</label>
<input name="origin_country_input" type="text" id="container-input-origin" value="Sverige" class="ui-autocomplete-input" autocomplete="off"><input type="hidden" name="origin_country" id="container-input-origin-value" value="203"></div>
<div class="form-group col-lg-4 col-md-5 col-sm-5">
<label for="container-from_postcode">Postal Code</label>
<input type="text" class="origin_postcode" id="container-origin_postcode" name="origin_postcode">
</div>
</div>
</div>
<div class="col-12 col-lg-5 pr-0">
<div class="row addressbook">
<div class="col-lg-2 col-md-1 "><span class="d-block d-md-none" style="font-weight: 900;">
To </span></div>
</div>
<div class="row">
<div class="col-lg-2 col-md-1 align-middle pt-md-4 mt-md-2"><span class="d-none d-md-block" style="font-weight: 900;">
To </span></div>
<div class="form-group col-md-6 col-sm-7">
<label for="container-input-destination">Country</label>
<input name="delivery_country_input" type="text" id="container-input-destination" value="Sverige" class="ui-autocomplete-input" autocomplete="off"><input type="hidden" name="delivery_country" id="container-input-destination-value" value="203"></div>
<div class="form-group col-lg-4 col-md-5 col-sm-5">
<label for="container-delivery_postcode">Postal Code</label>
<input type="text" class="delivery_postcode" id="container-delivery_postcode" name="delivery_postcode">
</div>
</div>
</div>
<div class="col-12 col-lg-2">
<div class="col-12 switch-lever" style="display:none">
<label for="container-delivery_postcode" style="margin-bottom: 3px">Receiver Address</label>
<input type="checkbox" name="residentialIndicatorDestination" value="1">
<span aria-hidden="true">
<span>Business</span>
<span class="switch-bg"></span>
<span>Private</span>
</span>
</div>
<div class="find-price " style="max-width: none;">
<button>Find your price</button>
<p>Prices from 59 kr,-</p>
</div>
</div>
</div>
</div>
<!--
<div class="details-address">
<div class="col-lg-10">
<div class="row small-gutters">
<div class="headline">\o/</div>
<div class="form-group col-9 col-lg-5">
<label>Gemte Adresser</label>
<input type="text" placeholder="Adressbog">
</div>
<div class="headline"><h5>From</h5></div>
<div class="form-group col-6 col-lg-3">
<label for="container-input-origin">Country</label>
<select id="container-input-origin" name="origin_country_id-input"></select>
</div>
<div class="form-group col-3 col-lg-2">
<label for="container-from_postcode">Postal Code</label>
<input type="text" class="origin_postcode" id="container-origin_postcode" name="origin_postcode">
</div>
<div class="headline">\o/</div>
<div class="form-group col-9 col-lg-5">
<label>Gemte Adresser</label>
<input type="text" placeholder="Adressbog">
</div>
<div class="headline"><h5>To</h5></div>
<div class="form-group col-6 col-lg-3">
<label for="container-input-destination">Country</label>
<select id="container-input-destination" name="shipping_country_id-input"></select>
</div>
<div class="form-group col-3 col-lg-2">
<label for="container-delivery_postcode">Postal Code</label>
<input type="text" class="delivery_postcode" id="container-delivery_postcode" name="delivery_postcode">
</div>
</div>
</div>
<div class="find-price">
<button>Find your price</button>
<p>Prices from 59 kr,-</p>
</div>
</div>
-->
<div class="details-packages">
<div class="details-types">
<div class="col-lg-11 offset-lg-1 d-none item-line" id="clone-container-custom-group">
<div class="row small-gutters">
<div class="form-group col-1 col-lg-1" style="max-width: 36px">
<div class="d-none remove-line"><span class="fa fa-lg fa-trash-o pt-4 mt-2" title="Remove Line"></span></div>
</div>
<div class="form-group col-3 col-lg-6">
<label for="antal">Units</label>
<input type="number" name="qty[]" min="1">
</div>
<div class="form-group col-8 col-lg-5">
<label for="antal">Select container type</label>
<select name="type_of_move" id="">
<option></option>
<!--<option>10 fods</option>-->
<option value="1">20 fods</option>
<option value="2">40 fods</option>
</select>
</div>
</div>
</div>
<div id="clone-container-container" class="middle-spacer">
<div class="col-lg-11 offset-lg-1 item-line">
<div class="row small-gutters">
<div class="form-group col-1 col-lg-1" style="max-width: 36px">
<div class="d-none remove-line"><span class="fa fa-lg fa-trash-o pt-4 mt-2" title="Remove Line"></span></div>
</div>
<div class="form-group col-3 col-lg-6">
<label for="antal">Units</label>
<input type="number" name="qty[]" min="1">
</div>
<div class="form-group col-8 col-lg-5">
<label for="antal">Select container type</label>
<select name="type_of_move" id="">
<option></option>
<!--<option>10 fods</option>-->
<option value="1">20 fods</option>
<option value="2">40 fods</option>
</select>
</div>
</div>
</div></div>
<div class="add-other">
<button type="button" data-group="clone-container-custom-group" data-container="clone-container-container"><div class="icon"></div>Send andre container typer</button>
</div>
</div>
<div class="find-price">
<button type="submit">Find your price</button>
<p>Prices from 59 kr,-</p>
</div>
</div>
</form>
</div>
<div class="form-wrap tab-pane fade no-details" id="document" role="tabpanel" aria-labelledby="document-tab">
<form action="results-simple.php" method="POST" class="">
<input type="hidden" name="type" value="document">
<div class="details-address pr-0">
<div class="row col-12">
<div class="col-12 col-lg-5 pr-0">
<div class="row addressbook">
<div class="col-lg-2 col-md-1 "><span class="d-block d-md-none" style="font-weight: 900;">
From </span></div>
</div>
<div class="row">
<div class="col-lg-2 col-md-1 align-middle pt-md-4 mt-md-2"><span class="d-none d-md-block" style="font-weight: 900;">
From </span></div>
<div class="form-group col-md-6 col-sm-7">
<label for="document-input-origin">Country</label>
<input name="origin_country_input" type="text" id="document-input-origin" value="Sverige" class="ui-autocomplete-input" autocomplete="off"><input type="hidden" name="origin_country" id="document-input-origin-value" value="203"></div>
<div class="form-group col-lg-4 col-md-5 col-sm-5">
<label for="document-from_postcode">Postal Code</label>
<input type="text" class="origin_postcode" id="document-origin_postcode" name="origin_postcode">
</div>
</div>
</div>
<div class="col-12 col-lg-5 pr-0">
<div class="row addressbook">
<div class="col-lg-2 col-md-1 "><span class="d-block d-md-none" style="font-weight: 900;">
To </span></div>
</div>
<div class="row">
<div class="col-lg-2 col-md-1 align-middle pt-md-4 mt-md-2"><span class="d-none d-md-block" style="font-weight: 900;">
To </span></div>
<div class="form-group col-md-6 col-sm-7">
<label for="document-input-destination">Country</label>
<input name="delivery_country_input" type="text" id="document-input-destination" value="Sverige" class="ui-autocomplete-input" autocomplete="off"><input type="hidden" name="delivery_country" id="document-input-destination-value" value="203"></div>
<div class="form-group col-lg-4 col-md-5 col-sm-5">
<label for="document-delivery_postcode">Postal Code</label>
<input type="text" class="delivery_postcode" id="document-delivery_postcode" name="delivery_postcode">
</div>
</div>
</div>
<div class="col-12 col-lg-2">
<div class="col-12 switch-lever" style="display:none">
<label for="document-delivery_postcode" style="margin-bottom: 3px">Receiver Address</label>
<input type="checkbox" name="residentialIndicatorDestination" value="1">
<span aria-hidden="true">
<span>Business</span>
<span class="switch-bg"></span>
<span>Private</span>
</span>
</div>
<div class="find-price " style="max-width: none;">
<button>Find your price</button>
<p>Prices from 59 kr,-</p>
</div>
</div>
</div>
</div>
<!--
<div class="details-address">
<div class="col-lg-10">
<div class="row small-gutters">
<div class="headline">\o/</div>
<div class="form-group col-9 col-lg-5">
<label>Gemte Adresser</label>
<input type="text" placeholder="Adressbog">
</div>
<div class="headline"><h5>From</h5></div>
<div class="form-group col-6 col-lg-3">
<label for="document-input-origin">Country</label>
<select id="document-input-origin" name="origin_country_id-input"></select>
</div>
<div class="form-group col-3 col-lg-2">
<label for="document-from_postcode">Postal Code</label>
<input type="text" class="origin_postcode" id="document-origin_postcode" name="origin_postcode">
</div>
<div class="headline">\o/</div>
<div class="form-group col-9 col-lg-5">
<label>Gemte Adresser</label>
<input type="text" placeholder="Adressbog">
</div>
<div class="headline"><h5>To</h5></div>
<div class="form-group col-6 col-lg-3">
<label for="document-input-destination">Country</label>
<select id="document-input-destination" name="shipping_country_id-input"></select>
</div>
<div class="form-group col-3 col-lg-2">
<label for="document-delivery_postcode">Postal Code</label>
<input type="text" class="delivery_postcode" id="document-delivery_postcode" name="delivery_postcode">
</div>
</div>
</div>
<div class="find-price">
<button>Find your price</button>
<p>Prices from 59 kr,-</p>
</div>
</div>
-->
<div class="details-packages">
<div class="details-types">
<div class="col-12">
<div class="row small-gutters pt-3 item-line">
<div class="col-6">
<div class="input-group">
<select id="document_type" name="document_type" class="form-control" onchange="checkDocumentType()">
<option value="1">Private</option>
<option value="2">Fortrykt Kurér</option>
</select>
<div class="input-group-append"><span class="input-group-text">Packaging</span></div>
</div>
</div>
<div class="col-6">
<div class="input-group">
<select id="document_weight" name="weight[]" class="form-control">
<option value="0.5">0,5</option>
<option value="1">1,0</option>
<option value="1.5">1,5</option>
<option value="2">2,0</option>
<option value="2.5">2,5</option>
</select>
<div class="input-group-append"><span class="input-group-text">Kg</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="find-price">
<button type="submit">Find your price</button>
<p>Prices from 59 kr,-</p>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html> Write, Run & Share Bootstrap code online using OneCompiler's Bootstrap online editor for free. It's one of the robust, feature-rich online editor for Bootstrap. Getting started with the OneCompiler's Bootstrap online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Bootstrap' and start writing code to learn and test online instantly.
Bootstrap is a free CSS framework for front-end web development. It contains CSS and JavaScript based design templates for styling like typography, forms, buttons, navigation, and other interface components. It helps developers to develop websites faster and also easy to use. You can use built-in classes hence you don't need to develop elements from scratch.
| Text colors | |||
|---|---|---|---|
| .text-muted | .text-primary | .text-success | .text-info |
| .text-warning | .text-danger | .text-secondary | .text-white |
| .text-dark | .text-body | .text-light |
| Background colors | |||
|---|---|---|---|
| .bg-primary | .bg-success | .bg-info | .bg-warning |
| .bg-danger | .bg-secondary | .bg-dark | .bg-light |
| Class | Description |
|---|---|
| .table | basic |
| .table-striped | adds zebra-stripes to a table |
| .table-bordered | adds borders on all sides of the table and cells |
| .table-hover | adds a hover effect with grey background color on table rows |
| .table-primary | adds Blue color to table row indicating an important action |
| .table-dark | adds a black background to the table |
| .table-success | adds Green color to table row indicating successful or positive action |
| .table-danger | adds Red color to table row indicating a negative action |
| .table-info | adds Light blue to table row indicating a neutral informative change or action |
| .table-warning | Orange to table row indicating attention required |
| .table-active | apply the hover color Grey to the table row or table cell |
| .table-secondary | Grey: Indicates a slightly less important action |
| .table-light | Light grey table or table row background |
| .table-dark | Dark grey table or table row background |
| .thead-dark | adds a black background to table headers |
| thead-light | adds a grey background to table header |
<img src="sample.jpg" class="rounded" alt="Sample text" />
| Class | Description |
|---|---|
| .rounded | adds rounded corners to an image |
| .rounded-circle | shapes the image to a circle |
| .img-thumbnail | shapes the image to a thumbnail |
| .float-right/.float-left | floats image to right/left |
| .mx-auto.d-block | Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) |
| .img-fluid | Responsive images automatically adjust to fit the screen's size |
The below button classes can be used on <a>, <button> or <input>.
<button type="button" class="btn">Basic Button</button>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-link">Link Button</button>
<button type="button" class="btn btn-outline-primary">Primary Outline Button</button>
<button type="button" class="btn btn-outline-secondary">Secondary Outline Button</button>
<button type="button" class="btn btn-outline-success">Success Outline Button</button>
<button type="button" class="btn btn-outline-info">Info Outline Button</button>
<button type="button" class="btn btn-outline-warning">Warning Outline Button</button>
<button type="button" class="btn btn-outline-danger">Danger Outline Button</button>
<button type="button" class="btn btn-outline-dark">Dark Outline Button</button>
<button type="button" class="btn btn-outline-light text-dark">Light Outline Button</button>
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
<!-- growing spinners-->
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
<!--Spinner size-->
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
| Class | Description |
|---|---|
| .col- | extra small devices with screen width less than 576px |
| .col-sm- | small devices with screen width equal to or greater than 576px |
| .col-md- | medium devices with screen width equal to or greater than 768px |
| .col-lg- | large devices with screen width equal to or greater than 992px |
| .col-xl- | xlarge devices with screen width equal to or greater than 1200px |
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div class="col-3">col-3</div>
</div>
Add the data-toggle="tooltip" to create a tooltip to an element.
<a href="#" data-toggle="tooltip" title="Click to see the result">Run</a>