I could use some assistance with a problem I'm facing while trying to acquire new skills through learning.
I would like my picture and forms to resemble the one in this image: 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-->