Bootstrap form always showing horizontal scroll - forms

I'm designing a system which uses all bootstrap controls. on every page, an horizontal scroll is displayed. however there seems to be no control that is causing this. I give you the example of one of my pages. I think I have something wrong in the head, but I can not find it.
<!DOCTYPE html>
<?error_reporting(0);?>
<? include_once "include/checkSession.inc"; ?>
<? include_once "include/conexion.inc"; ?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Clínica 25 de Mayo</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="styles/bootstrap_flatly.css"/>
<script type="text/javascript" src="include/jquery.js"></script>
<script type="text/javascript" src="include/bootstrap.min.js"></script>
<script type="text/javascript" src="include/bootstrap-datepicker.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="bienvenido.php?login=<?=$textLogin;?>">Clínica 25 de Mayo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Inicio</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Mis Turnos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Reservar Turno</li>
<li>Ver Turnos Reservados</li>
<li>Anular Turno</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Mi Cuenta<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Ingreso de mis Datos y/o de Otra persona.</li>
<li>Datos Propios</li>
<li>Cambiar Contraseña</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Cerrar Sesión</li>
</ul>
</div>
</div>
</nav>
<form class="form-horizontal" name="formPwd" method="post" action="contraseniaGuardar.php">
<h4 class="text-center text-primary">Complete el formulario para cambiar la contraseña de acceso al sistema del Usuario<br><b><?=$_SESSION["nombreUsr"]; ?> <?=$_SESSION["apellidoUsr"]; ?></b></h4>
<input type="hidden" name="login" value="<?=$textLogin;?>">
<h2 class="text-center text-primary">Ingrese su nueva contraseña</h2>
<div class="form-group">
<label class="col-sm-3 control-label">Contraseña anterior:</label>
<div class="col-sm-6">
<input class="form-control" type="password" name="textAnterior" size="35" maxlength="50">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Nueva contraseña:</label>
<div class="col-sm-6">
<input class="form-control" type="password" name="textNueva" size="35" maxlength="50">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Confirme la contraseña:</label>
<div class="col-sm-6">
<input class="form-control" type="password" name="textConfirma" size="35" maxlength="50">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<input type="button" value="Guardar" class="btn btn-lg btn-success btn-block" onClick="javascript:modificar();">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<input type="button" value="Cancelar" class="btn btn-lg btn-primary btn-block" onClick="javascript:cancelar();">
</div>
</div>
</form>
</body>

Related

how to align form items with bootstrap

Please exam the snippet in full page mode. The first navbar is fine. I tried to reduce the width of the search input but when I do that I can no longer get the links to move all the way to the right as in the first example. Can someone explain what's controlling the the width of the form and how do I adjust it to achieve the desired result
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Bootstrap Sandbox</title>
</head>
<body>
<nav class='navbar navbar-expand-md bg-primary navbar-light mb-3'>
<div class='container'>
<a class='navbar-brand' href="#">NavBar </a>
<button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav2'>
<span class='navbar-toggler-icon'></span>
</button>
<div id='navbarNav2' class='collapse navbar-collapse '>
<ul class='navbar-nav ml-auto'>
<li class='nav-item'>
<a class='nav-link' href="#">Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Services</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Contact</a>
</li>
</ul>
<form class="form-inline justify-content-end ">
<input type="text" class="form-control " placeholder='Search'>
<button class="btn btn-outline-success">Search</button>
</form>
</div>
</div>
</nav>
<nav class='navbar navbar-expand-md bg-primary navbar-light'>
<div class='container'>
<a class='navbar-brand' href="#">NavBar </a>
<button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav3'>
<span class='navbar-toggler-icon'></span>
</button>
<div id='navbarNav3' class='collapse navbar-collapse '>
<ul class='navbar-nav ml-auto'>
<li class='nav-item'>
<a class='nav-link' href="#">Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Services</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Contact</a>
</li>
</ul>
<form class="form-inline justify-content-end ">
<input type="text" class="form-control w-50" placeholder='Search'>
<button class="btn btn-outline-success">Search</button>
</form>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>

I think the width of the form is based on the combined width of the search button and the input-element(with its default width).
With w-50, the input's width is reduced to half of the form's width which in-turn is based on the default width of the input element.
So, instead of setting width:50%, if you can set the width to a fixed value like width:8em, you can achieve the expected results.

how to create side panel custom search for leaflet that search through geojson data?

I have a project using leaflet, but I want to do a custom search through GeoJSON data but I don't know how to do it. I have a side panel with search box and button. below is my design:.
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
var map = new L.map("myMAP_id", {
fullscreenControl: {
pseudoFullscreen: false,
position: "topright"
}
}).setView([10.392241, 124.98], 16.5);
var layer = new L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'© OpenStreetMap contributors',
visible: false,
title: "OpenStreetMap"
}
);
map.addLayer(layer);
var poly = L.geoJson(slsu_bldg, {
style: function(feature) {
return bldg_style;
},
onEachFeature: function(feature, marker) {
marker.bindPopup(
"<div><b>SOUTHERN LEYTE STATE UNIVERSITY" +
"<br>" +
feature.properties.BLDG_NAME +
"<br><button id='" +
feature.properties.ID +
"' class='btn btn-xs btn-primary' style='height: 23px; font-size: 11px; padding: 3px 6px; letter-spacing: 0.02rem; margin-top: 5px;'>More Details <i class='fa fa-caret-right'></i></button></div"
);
}
});
var search_val;
$("#search").on("click", function() {
search_val = $("#searchtext10").val();
console.log(search_val);
var search = new L.Control.Search({
options: {
layer: poly,
zoom: 19,
initial: false,
filterData: search_val,
propertyName: "BLDG_NAME",
marker: {
icon: true,
animate: true,
circle: {
radius: 10,
weight: 4,
color: "#1BC500",
stroke: true,
fill: true
}
}
}
});
console.log(search);
});
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SLSU Asset Management</title>
<link rel="shortcut icon" href="http://localhost/GIS-SLSU_AssetMgt/assets/img/slsu.png" />
<!-- offline bootstrap -->
<!-- online bootstrap -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- custom stylesheet -->
<link rel="stylesheet" href="http://localhost/GIS-SLSU_AssetMgt/assets/custom/style.css" />
<!-- leaflet offline connection -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-src.js">
integrity="sha512-eldJj3obVsCO9Tlrj/J8AFrrTFD4+sN8d9HdwKAqZuSgHloWOm6IzetLy1uQnwh9qLssrY3TAgIJQfjPfQJxHQ=="
crossorigin=""
</script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/L.Conttol.Locate.min.js"></script>
<!-- leaflet full screen -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.min.js"></script>
<!-- online maptiler mapboxGL map -->
<script src="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
<script src="https://cdn.maptiler.com/mapbox-gl-leaflet/latest/leaflet-mapbox-gl.js"></script>
<link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" />
<!-- offline maptiler mapboxGL map -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/leaflet-mapbox-gl.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.js"></script>
<!-- geojson coder -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"
/>
<script src="https://unpkg.com/osmtogeojson#2.2.12/osmtogeojson.js"></script>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.js"></script>
</head>
<body>
<!--- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand image" href="#">
<img
class="img img-responsive"
src="http://localhost/GIS-SLSU_AssetMgt/assets/img/LOGO.png"
alt=""
/>
<!-- SLSU-MC GIS MAP -->
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarColor01"
aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Help</a>
</li>
</ul>
</div>
</nav>
<!---map section -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12 map_wrapper">
<div class="row">
<div class="col-md-4" style="padding-right: 0 !important;">
<div class="left-control">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link"
type="button"
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
BASE MAPS
</button>
</h2>
</div>
<div
id="collapseOne"
class="collapse show"
aria-labelledby="headingOne"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
<label>
<div>
<input
type="radio"
id="basemaps"
value="OpenStreetMap"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
checked="checked"
/>
<span> Open Street Map</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Maptiler"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Maptiler</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="MapBox"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> MapBox</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Google"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Google</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="WorldImagery"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> World Imagery</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link collapsed"
type="button"
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
LAYER MAPS
</button>
</h2>
</div>
<div
id="collapseTwo"
class="collapse"
aria-labelledby="headingTwo"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-overlays">
<label>
<div>
<input
type="checkbox"
id="vector_layerBuilding"
value="Buildings"
class="leaflet-control-layers-selector"
checked=""
onclick="vector_layerBuilding()"
/>
<span> Buildings</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerRoads"
value="Roads"
class="leaflet-control-layers-selector"
onclick="vector_roads()"
/>
<span> Roads</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBoundary"
value="Boundary"
class="leaflet-control-layers-selector"
onclick="vector_layerBoundary()"
/>
<span> Boundary</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerTrack"
value="Track/Oval"
class="leaflet-control-layers-selector"
onclick="vector_layerTrack()"
/>
<span> Track/Oval</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerField"
value="Field"
class="leaflet-control-layers-selector"
onclick="vector_layerField()"
/>
<span> Field</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerParking"
value="Parking Lot"
class="leaflet-control-layers-selector"
onclick="vector_layerParking()"
/>
<span> Parking Lot</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerPath"
value="Foot Path"
class="leaflet-control-layers-selector"
onclick="vector_layerPath()"
/>
<span> Foot Path</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBleacher"
value="Bleacher"
class="leaflet-control-layers-selector"
onclick="vector_layerBleacher()"
/>
<span> Bleacher</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<div id="myMAP_id"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info" style="height: 28vh">
<div align="right"><button class="btn btn-default">IMPORT</button></div>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Building Name</th>
<th>Assets</th>
<th>Counts</th>
<th>Unit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>CCSIT Building</td>
<td>Computer Sets</td>
<td>100</td>
<td>PCS</td>
</tr>
<tr>
<td>2</td>
<td>CCSIT Building</td>
<td>MAC PC</td>
<td>25</td>
<td>PCS</td>
</tr>
<tr>
<td>3</td>
<td>CCSIT Building</td>
<td>Mga Gwapo</td>
<td>Gamay Ra Me!</td>
<td>Way Labot Jorton (by: Ranel)</td>
</tr>
<tr>
<td>4</td>
<td>CCSIT Building</td>
<td>Mga Panget</td>
<td>Gamay Ra Sila!</td>
<td>Labot Si Jorton (by: Ranel)</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<p>
<a href="https://leafletjs.com/" target="_blank">Leaflet ©</a
> | Developed by: darksidebug_09
</p>
</div>
</div>
</div>
<!--- scripts here -->
<!--- geojson data -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/new_bldg_data.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_boundary.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/road_network.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/track_oval.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_field.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/parking_lot.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/foot_path.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/bleacher.geojson"></script>
<!--- script -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/data_scripts.js"></script>
<!-- Bootstrap core JavaScript and JQuery-->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/js/jquery.min.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

Form design issue with bootstrap 3

I do not write bootstrap code but some how i manage to do it now but form does not looks good. two issue is there. How to fix my issue. thanks
1) buttons are not properly aligned.
2) how to create gap between two buttons.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-2 form-group">
<label for="textbox1">Phone No</label>
<input class="form-control" id="textbox1" type="text" />
</div>
<div class="col-md-2 form-group">
<label for="textbox2">Post Code</label>
<input class="form-control" id="textbox2" type="text" />
</div>
<span class="clearfix"></span>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-primary" value="Reset">Reset</button>
</div>
</div>
</form>

here is the code for you:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.m{
margin:10px;
}
</style>
</head>
<body style="background-color: green">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-2 form-group">
<label for="textbox1">Phone No</label>
<input class="form-control" id="textbox1" type="text" />
</div>
<div class="col-md-2 form-group">
<label for="textbox2">Post Code</label>
<input class="form-control" id="textbox2" type="text" />
</div>
<span class="clearfix"></span>
<button type="submit" class="btn btn-primary m">Submit</button>
<button type="reset" class="btn btn-primary m" value="Reset">Reset</button>
</div>
</div>
</form> </body>
</html>
check this out fiddle: https://jsfiddle.net/sh8k20xx/

iframe form inside bootstrap modal jump on keypress on iPhone

I have embedded an iframe form inside bootstrap modal. When I keypress form input on iPhone ( both Safari and Chrome ), the page jumps and goes up. I have already disabled focus zoom by using meta viewport and font size 16px. If I don't disable zoom, the page will jump on input focus.
Bootstrap versin 3.3.7
jQuery version 3.1.1
iPhone 6
iOS version 10.2.1
The attached snippet will work because it is not in iframe. It happens when the form is in iframe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
<title>Bootstrap 101 Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
input,
textarea,
select {
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<!-- This is how I embed iframe in modal -->
<!-- <iframe src="form.html"></iframe> -->
<!-- The following form will show from iframe -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
<!-- iframe form end -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Form action on landing page

I have a site(wordpress), and I received a pre-made landing page to upload to my site.
This landing page has a button which supposed to send the input that a user enters (name, last name) to a file named results.php
Right now the "search now" button does nothing.
I haven’t figured out how to make it work.
Please help,
Many thanks
this is the html/php page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>yoursite.com</title>
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Header -->
<header id="header">
<div class="wrapper cf">
<h1 class="site-logo"><img src="img/logo.png" alt="yoursite.com"></h1>
<div class="arrested">
<div class="arrested-title">.. Today:</div>
<div class="arrested-list">
<ul>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
</ul>
</div>
</div>
</div>
</header>
<!-- // Header -->
<!-- Content -->
<div id="main">
<div class="wrapper cf">
<div class="search-content cf">
<div class="search-secure">All searches are Secure</div>
<div class="search-header cf">
<div class="search-header-content">
<div class="search-header-content-inn">
<h2 class="search-title"><span>yoursite.com</span> Search Service</h2>
<div class="search-database">Database Update on September 8, 2015</div>
</div>
</div>
<div class="search-header-sidebar">
<div class="search-map"><img src="img/map.png" alt=""></div>
</div>
</div>
<div class="search-form cf">
<div class="search-start"><span>Start Your Search Below</span></div>
<div class="cell">
<input id="firstname" type="text" name="firstname" value="" placeholder="FIRST NAME" />
</div>
<div class="cell">
<input id="lastname" type="text" name="lastname" value="" placeholder="LAST NAME" />
</div>
<div class="cell">
<select id="state" name="state"><option value="00">SELECT STATE</option><option value="ALL">Nationwide</option><option value="AL">AL</option><option value="AK">AK</option><option value="AR">AR</option><option value="AZ">AZ</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DC">DC</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="IA">IA</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="MA">MA</option><option value="MD">MD</option><option value="ME">ME</option><option value="MI">MI</option><option value="MN">MN</option><option value="MO">MO</option><option value="MS">MS</option><option value="MT">MT</option><option value="NE">NE</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NV">NV</option><option value="NC">NC</option><option value="ND">ND</option><option value="NY">NY</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="RI">RI</option><option value="SD">SD</option><option value="SC">SC</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VA">VA</option><option value="VT">VT</option><option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option><option value="WY">WY</option></select>
</div>
<div class="cell btn">
<input type="submit" name="submit" value="Search Now" />
</div>
</div>
<div class="search-incs cf">
<h3 class="search-title">Records on File:</h3>
<div class="search-incs-list cf">
<ul>
<li>And More...</li>
</ul>
</div>
<div class="search-report"></div>
</div>
</div>
</div>
</div>
<!-- // Content -->
<!-- Footer -->
<footer id="footer">
<div class="wrapper cf">
<div class="fnav cf">
<ul>
<li>Home</li>
<li>Login</li>
<li>Help</li>
<li>Privacy</li>
<li>Terms</li>
</ul>
</div>
<div class="fcopy">
<p>© Copyright 2015 yoursite.com. All Rights Reserved.</p>
</div>
</div>
</footer>
<!-- // Footer -->
</body>
</html>