issue with forms in bootstrap and html - html

Question

I have a bit of a problem and i need some help. I am learning new things and trying to get some skills with the time spend on learning.
I want to make this picture and forms look the same as the picture. I am posting my code
enter image description here
index.html
<div class="jumbotron">
<div class="row">
<div class="col-md-6 col-sm-6">
<img class="img-responsive" src="img/lqvopodravnenasnimka.jpg" alt="smiley face">
</div> <!--col-md-5-->
<div class="col-md-6 col-sm-6">
<h3>Send Request</h3>
<p id="mainparagraph">Заповядайте в нашия нов хотел Grand Hotel Gergana. Ние Ви предлагаме отлични условия, където можете да прекарате своите ценни свободни дни.</p>
<form name="myForm" action="#" onsubmit="return validateForm()" method="post">
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-sm" style="margin-top:20px;">
<label for="firstname" class="control-label">Name</label> <!--name-->
<br>
<input type="text" class="form-control" id="firstname" style="width:100%;" name="fname">
</div><!-- form-group-->
</div><!--col-md-5-->
<div class="col-md-6">
<div class="form-group form-group-sm" style="margin-top:20px;">
<label for="surname" class="control-label">Surname</label> <!--surname -->
<br>
<input type="text" class="form-control" id="surname" style="width:100%;" name="sname">
</div><!-- form-group-->
</div><!--col-md-5-->
</div><!--row-->
<div class="row">
<div class="col-md-12">
<div class="form-group form-group-sm" style="margin-top:20px;">
<label for="email" class="control-label">Email</label>
<br>
<input type="text" class="form-control" id="email" style="width:100%;" name="mail">
</div>
</div>
</div><!--row-->
<div class="row">
<div class="col-sm-12">
<div class="form-group form-group-sm" style="margin-top:20px;">
<label for="phone" class="control-label">Mobile phone</label>
<!--<span class="glyphicon glyphicon-arrow-right"><p style="color:gray; font-style:italic; font-size:0.7em;">Sample: +352XXXXXXXXX</p> -->
<br>
<input type="phone" class="form-control" id="phone" style="width:100%;" name="mphone">
</div>
</div>
</div><!--row-->
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-sm" style="margin-top:20px;">
<label for="date" class="control-label">Date of birth</label>
<br>
<input type="number" class="form-control" id="number" Placeholder="DD" style="width:55px;" name="day">
<input type="number" class="form-control" id="number" Placeholder="MM" style="width:55px;" name="month">
<input type="number" class="form-control" id="number" Placeholder="YYYY" style="width:90px;" name="year">
</div>
</div><!--col-md-6-->
<div class="col-md-6">
<div class="form-group form-group-sm" >
<label for="text" class="control-label" style="margin-top:20px;">Nationality</label>
<br>
<select class="options" name="cars" style="width:100%;">
<option value="България">България</option>
<option value="Румъния">Румъния</option>
<option value="Гърция">Гърция</option>
<option value="Сърбия">Сърбия</option>
</select>
</div><!--form-group-->
</div>
<div class="col-md-12">
<input type="submit" value="SAMPLE BUTTON">
</div>
</div><!--row-->
</form>
</div><!--col-md-7-->

Answer 1

Its quite a simple fix. You were really close! Firstly with Bootstrap you need to have a container, so that's a class that would be on your main div that holds everything so for this instance it would be your jumbotron div.
<div class="jumbotron container">
This will format 90% of what you are trying to achieve into a neat box where all the cols work in harmony with each other.
As for the input boxes, I see you were having difficulty with your date inputs. This too is an easy fix. Simply add the following code to your css:
#number {
float: left;
}
This will push them close together as seen in your picture.
Working example here - https://codepen.io/anon/pen/MoqRMK
I am sure you are experienced enough to make any other required changes.