How to align the labels and form-field

Question

I want to align the labels and as well as text-fields in this way:

But the output I get from my code is this:

And my code is:

<span class="questions">Your Date of birth: </span>
	<input type="date" placeholder="DOB"/><br>
<span class="questions">Which Country You Are In:</span>
	<select> 
		<option selected disabled>Select Country</option>
		<option>India</option>
	</select><br>
<span class="questions">In which University You Are In:</span>
	<select> 
		<option selected disabled>Select University</option>
		<option>AKTU</option>
	</select><br>
<span class="questions">In which College You Are In:</span>
	<select> 
		<option selected disabled>Select Your College</option>
		<option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
	</select><br>
<span class="questions">Your Mobile Number: </span>
	<input type="tel" placeholder="Mobile Number"/><br>
<button class="btn">Proceed to Feeds.</button>

What should I add to CSS so that I get the required output or can I add   before the <span> tag to adjust as the output required. Can anyone help me in this.

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $( function() {
    $( "#datepicker" ).datepicker({
        beforeShow: function(){    
           $("#abc").css('line-height', '14em') 
        },

    });

  } );
  function chngecss(){
        $("#abc").css('line-height', 'unset');
        $('#datepicker').Close();
    }
  </script>

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <h2>Horizontal form</h2>
    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label class="control-label col-sm-2" for="dob">Your Date Of Birth :</label>
        <div class="col-sm-5" id="abc">
          <input class="form-control" type="text" id="datepicker" onblur="chngecss();" class="ui-datepicker" placeholder="DOB"/><br>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="country">In Which Country You Are In :</label>
        <div class="col-sm-5">
          <select class="form-control">
            <option selected disabled>Select Your College</option>
            <option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="mobno">Your Mobile Number :</label>
        <div class="col-sm-5">
          <input type="text" class="form-control" id="mobno" placeholder="Enter Mobile Number">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email:</label>
        <div class="col-sm-5">
          <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="pwd">Password:</label>
        <div class="col-sm-5">
          <input type="password" class="form-control" id="pwd" placeholder="Enter password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-5">
          <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-5">
          <button type="submit" class="btn btn-default">Submit</button>
        </div>
      </div>
    </form>
  </div>

Answer 2

Try this:

.questions{
width:50%;
  text-align:right;
  display:inline-block;
}
input{width:150px;}
select{width:150px;}

<span class="questions">Your Date of birth: </span>
	<input type="date" placeholder="DOB"/><br>
<span class="questions">Which Country You Are In:</span>
	<select> 
		<option selected disabled>Select Country</option>
		<option>India</option>
	</select><br>
<span class="questions">In which University You Are In:</span>
	<select> 
		<option selected disabled>Select University</option>
		<option>AKTU</option>
	</select><br>
<span class="questions">In which College You Are In:</span>
	<select> 
		<option selected disabled>Select Your College</option>
		<option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
	</select><br>
<span class="questions">Your Mobile Number: </span>
	<input type="tel" placeholder="Mobile Number"/><br>
<div align="center"> <button class="btn">Proceed to Feeds.</button><div>

Answer 3

Use form-horizontal class in form tag

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Watch this in fullpage