i switched from msn bootstrap to bootstrap which i uploaded manually.
i am doing this project on cloud 9.
when the screen is small enouth the nav bar has a button on the right,
which drops the navbar down and displays my other links
which now does not work.
it might be the jquery but i have no idea if i put it in here or if i did so correctly
any help is greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> inclass-project </title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--start of nav-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Adrw4's Site</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="active">Contact</li>
<li class="nav-item">Test</li>
</ul>
</div>
</div>
</nav>
<!--end of nav section-->
<section class="hero-section">
<div class="container">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="usa">Usa</option>
<option value="canada">Canada</option>
<option value="england">England</option>
<option value="other">Other</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</section>
<!-- start of footer-->
<footer class="footer-container">
<div class="social-media-container left">
</div>
<div class="contact-container left">
<span>dsafdsf</span>
<span class="address">fgfggf</span>
<p>Copyright © 2017 Adrw4 All rights reserved.</p>
</div>
<div class="social-media-container right">
</div>
</footer>
<!--end of footer-->
</body>
</html>
Change
data-target="navbar-collapse"
to
data-target=".navbar-collapse"
I used your navigation in here:
http://jsfiddle.net/DTcHh/
Related
I am trying to put the select option inside the input box (left-side)
<div class="row">
<div class="col one">
<label class="label">Loan amount</label>
<div class="input-group mb-3">
<select class="form-select btn-primary input-group-text" id="basic-addon1" aria-label="Default select example">
<option selected>USD</option>
<option value="1">ETH</option>
<option value="2">USDC</option>
</select>
<input class="form-control loan" type="text" style="direction: rtl;" placeholder="0.00" aria-label="Recipient's username" aria-describedby="basic-addon2">
</div>
<label class="label" for="customRange1">Duration</label>
<div class="range">
<input type="range" class="form-range" id="customRange1" />
</div>
</div>
Here's a screenshot
here is demo code on how to put selection inside input with bootstrap v3.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<select class="form-select btn-primary input-group-text btn btn-default
dropdown-toggle" id="basic-addon1" aria-label="Default select example" data-toggle="dropdown" style="padding: 8px;">
<option selected>USD</option>
<option value="1">ETH</option>
<option value="2">USDC</option>
</select>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
</div><!-- /.row -->
</form>
</div>
</body>
</html>
I created a form that it is connected to my google Doc but the problem the form is responsive to phone screen as it I want it to be. please check the attached picture
this how it looks in my phone browser
I want it to full screen like it is opened from an app. I have used materialize CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> creat PDF </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s6">
<input placeholder="Your name" id="name" type="text" class="validate">
<label class="active" for="name">First Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input placeholder="Your name" id="id" type="text" class="validate">
<label class="active" for="id">Your Id</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input placeholder="Your name" id="dep" type="text" class="validate">
<label class="active" for="dep">Your Department</label>
</div>
</div>
<button id="btn" onclick="waitingMessage()" class="btn waves-effect waves-light" type="submit"
name="action">Submit
<i class="material-icons right">send</i>
</button>
<div id="msg">
<div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!=include('js');?>
</body>
</html>
You need to read the grid section of materialize css it is the most important section of any css framework.
Here is a solution:
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> creat PDF </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col m6 offset-m3 s12 ">
<div class="input-field">
<input placeholder="Your name" id="name" type="text" class="validate">
<label class="active" for="name">First Name</label>
</div>
<div class="input-field">
<input placeholder="Your name" id="id" type="text" class="validate">
<label class="active" for="id">Your Id</label>
</div>
<div class="input-field">
<input placeholder="Your name" id="dep" type="text" class="validate">
<label class="active" for="dep">Your Department</label>
</div>
<button id="btn" onclick="waitingMessage()" class="btn waves-effect waves-light" type="submit"
name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="row">
</div>
<div id="msg">
<div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!=include('js');?>
</body>
</html>
I am having an issue where my dropdown menu is not working. Like sometimes when I change something in my css or html and refresh the page it will work once but then never again. Can't for the life of me figure out why. I'm referring to the ul with the class of nav navbar-nav pull-right.
Hopefully pick the brains of you guys for some assistance.
Here is the code for my page:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title></title>
<meta name="Richmond Movie Club" content="">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- end responsive-dropdown -->
RichmondMC
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>Movie Database</li>
<li>Gallery</li>
<li>Ratings</li>
</ul>
<!-- end navbar-nav -->
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> My Account <strong class="caret"></strong>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-wrench"></span> Settings</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Register New User</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-play"></span> Sign In</li>
<li><span class="glyphicon glyphicon-off"></span> Sign Out</li>
</ul>
<!-- end dropdown-menu -->
</li>
<!-- end dropdown -->
</ul>
<!-- end myAccount-dropdown -->
</div>
<!-- end nav-collapse -->
</div>
<!-- end container -->
</div>
<!-- end navbar -->
<div class="modal fade" id="registerModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
<h4 class="modal-title"><span class="glyphicon glyphicon-th-list"></span> New User Registration </h4>
</div>
<!-- end modal-header -->
<div class="modal-body">
<h5>Enter the New Members details including username/password to complete registration</h5><br>
<form action="" class="form-horizontal">
<div class="form-group">
<label for="username" class="col-lg-4 control-label">Username:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="username" placeholder="Username" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-4 control-label">Password:</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-lg-4 control-label">First Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="firstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-lg-4 control-label">Last Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<label for="emailAddress" class="col-lg-4 control-label">Email Address:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="emailAddress" placeholder="Email Address" required>
</div>
</div>
<div class="form-group">
<label for="phoneNumber" class="col-lg-4 control-label">Phone Number:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="phoneNumber" placeholder="Phone Number" required>
</div>
</div>
<button class="btn btn-success pull-right" type="submit" id="alertMe">Submit</button><br>
</form>
<!-- end form -->
</div>
<!-- end modal-body -->
<div class="modal-footer">
<div class="alert alert-success alert-block fade in" id="successAlert">
<button class="close" type="button" data-dismiss="alert" aria-label="close"><span aria-hidden="true">×</span></button>
<h4>Success!</h4>
<p>New user registered successfully</p>
</div><!-- end alert -->
</div>
</div>
<!-- end modal-content -->
</div>
<!-- end modal-dialog -->
</div>
<!-- end modal -->
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>
window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')
</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
</body>
</html>
EDIT
Forgot to include that these are .php files.
This is my header.php and I include it into all my pages with a
<?php include "header.php" ?>
if that makes any difference.
It is working fine in the below snippet. There must be some problem in your custom css or js file which is coming in the way of the dropdown.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title></title>
<meta name="Richmond Movie Club" content="">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- end responsive-dropdown -->
RichmondMC
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>Movie Database</li>
<li>Gallery</li>
<li>Ratings</li>
</ul>
<!-- end navbar-nav -->
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> My Account <strong class="caret"></strong>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-wrench"></span> Settings</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Register New User</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-play"></span> Sign In</li>
<li><span class="glyphicon glyphicon-off"></span> Sign Out</li>
</ul>
<!-- end dropdown-menu -->
</li>
<!-- end dropdown -->
</ul>
<!-- end myAccount-dropdown -->
</div>
<!-- end nav-collapse -->
</div>
<!-- end container -->
</div>
<!-- end navbar -->
<div class="modal fade" id="registerModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
<h4 class="modal-title"><span class="glyphicon glyphicon-th-list"></span> New User Registration </h4>
</div>
<!-- end modal-header -->
<div class="modal-body">
<h5>Enter the New Members details including username/password to complete registration</h5><br>
<form action="" class="form-horizontal">
<div class="form-group">
<label for="username" class="col-lg-4 control-label">Username:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="username" placeholder="Username" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-4 control-label">Password:</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-lg-4 control-label">First Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="firstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-lg-4 control-label">Last Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<label for="emailAddress" class="col-lg-4 control-label">Email Address:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="emailAddress" placeholder="Email Address" required>
</div>
</div>
<div class="form-group">
<label for="phoneNumber" class="col-lg-4 control-label">Phone Number:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="phoneNumber" placeholder="Phone Number" required>
</div>
</div>
<button class="btn btn-success pull-right" type="submit" id="alertMe">Submit</button><br>
</form>
<!-- end form -->
</div>
<!-- end modal-body -->
<div class="modal-footer">
<div class="alert alert-success alert-block fade in" id="successAlert">
<button class="close" type="button" data-dismiss="alert" aria-label="close"><span aria-hidden="true">×</span></button>
<h4>Success!</h4>
<p>New user registered successfully</p>
</div><!-- end alert -->
</div>
</div>
<!-- end modal-content -->
</div>
<!-- end modal-dialog -->
</div>
<!-- end modal -->
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>
window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')
</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
</body>
</html>
In this code, i want to remove remove extra spaces (shown in the image) and also the drop down list is showing in the wrong position(it should be exactly below the list).I just use this single flie.what modifications are needed to resolve this?Please suggest.please let me know for further information.Thanks.
Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee Joining Information</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 2px;
}
</style>
</head>
<body>
<h1>Employee Joining Information Form</h1>
<div class="bs-example">
<form class="form-horizontal">
<div class="form-group">
<label type="text" class="control-label col-xs-2">Employee ID</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="eid">
</div>
</div>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="nm">
</div>
</div>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Designation</label>
<div class="dropdown" >
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Choose Designation <span class="caret"></span></button>
<ul class="dropdown-menu">
<li >Manager</li>
<li >Officer</li>
<li >Receptionist</li>
</ul>
</div>
</div>
</form>
</div>
</body>
</html>
The problem was your dropdown needed to be wrapped inside <div class="col-xs-5"></div>
.bs-example{
margin: 2px;
}
label.control-label.col-xs-2 {
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee Joining Information</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Employee Joining Information Form</h1>
<div class="bs-example">
<form class="form-horizontal">
<div class="form-group">
<label type="text" class="control-label col-xs-2">Employee ID</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="eid">
</div>
</div>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="nm">
</div>
</div>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Designation</label>
<div class="col-xs-5">
<div class="dropdown" >
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Choose Designation <span class="caret"></span></button>
<ul class="dropdown-menu">
<li >Manager</li>
<li >Officer</li>
<li >Receptionist</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I am trying to make a form with 2 columns using bootstrap. The fields name and street appear side by side (large screen) and no problem but on second rowzip code is not vertical aligned with City because zip code has 2 edit boxs. If i use just one edit box in zip code everything looks fine but if i use two edit boxes an extra pading top appears. Why?
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<H1>Hello</H1>
<P>Sample text here.</P>
<section id="Delivery" class="Delivery-section">
<div class="container">
<div class="row" style='padding:0px'>
<div class="col-sm-1">
</div>
<div class="col-sm-10" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'>
<legend style='text-align:center'>Delivery Address</legend>
</div>
<div class="col-sm-1">
</div>
</div>
<div class="row" style='padding:0px'>
<div class="col-sm-1">
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'>
<span style='font-weight: bold;font-size:13px;'>Name: (*)</span><br>
<input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="name" id="name" value='' size="30" />
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'>
<span style='font-weight: bold;font-size:13px;'>Street: (*)</span><br>
<input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="street" id="street" value='' size="30" />
</div>
<div class="col-sm-1">
</div>
</div>
<div class="row" style='padding:0px'>
<div class="col-sm-1">
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px;'>
<span style='font-weight: bold;font-size:13px;'>City: (*)</span><br>
<input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="city" id="city" value='' size="30" />
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px;'>
<span style='font-weight: bold;font-size:13px;'>Zip code: (*)</span><br>
<input style="width:14%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="cp1" id="cp1" value='' size="30" />
<input style="width:14%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="cp2" id="cp2" value='' size="30" />
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</section>
To fix this problem I just took out the font-size:20px out of problematic div element. As to why this seems to have fixed the issue I cannot say because you have that in the other div elements as well and it doesn't seem to be a problem. I will say however that the font-size attribute does not need to be specified in the div elements as you are giving font-size to each of the elements individually, unless of course you were going to add or do have other elements that it are being used that are not in the code above. I also checked taking out the font-size attribute out of the other div elements and it has no negative effect.
I could not get the code to show what you asked about re padding top etc. I removed one of the zip inputs... still no difference. (using chrome here).
Here is the Fiddle.
I removed all of the inline styles so the code is easier to read/follow.
I removed all of those blank divs you look to be using to offset/fill. That sort of blank divs like that all bar the most top can end up floating.
I replace this with col-sm-offset-1 as you will see in the row.
I reworked the zip and city cols here.
Is this what you were looking for when you asked about vertically align the zip and the city?
I wasn't to sure.
Image is of large screen view.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.space {
margin-top: 2%;
margin-bottom: 2%;
}
.address {
font-size: 20px;
text-align:center;
}
.inputs {
width:100%;
font-size:12px;
font-weight:300;
line-height:20px;
}
.zip {
width:14%;
font-size:12px;
font-weight:300;
line-height:20px;
}
.labels {
font-size: 20px;
padding:0px;
padding-left:0px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 space"></div>
<div class="container col-lg-12">
<H1>Hello</H1>
<P>Sample text here.</P>
<section id="Delivery" class="Delivery-section">
<div class="container">
<div class="row">
<!--<div class="col-sm-1">
</div>-->
<div class="col-sm-10 address" >
<legend>Delivery Address</legend>
</div>
<!--<div class="col-sm-1">
</div> -->
</div>
<div class="row col-sm-10 col-sm-offset-1">
<!-- <div class="col-sm-1">
</div>-->
<div class="col-sm-5">
<span class='labels'>Name: (*)</span><br>
<input class='inputs' type="text" name="name" id="name" value='' />
</div>
<div class="col-sm-5">
<span class='labels'>Street: (*)</span><br>
<input class='inputs' type="text" name="street" id="street" value='' />
</div>
<!-- <div class="col-sm-1">
</div>-->
<!--</div>-->
<div class="row col-sm-5">
<!-- <div class="col-sm-1">
</div>-->
<div class="col-sm-12">
<span class='labels'>City: (*)</span><br>
<input class='inputs' type="text" name="city" id="city" value='' />
</div>
<div class="col-sm-12">
<span class='labels'>Zip code: (*)</span><br>
<input class="zip" type="text" name="cp1" id="cp1" value='' />
<input class="zip" type="text" name="cp2" id="cp2" value='' />
</div>
<!-- <div class="col-sm-1">
</div>-->
</div>
</div>
</div>
</section>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Added to this post
Using your original code as is this is what I see in a large view, both inputs are aligned.