Form in right side of photo - css

Question

I'm having some issues working with bootstrap. I'm a little confused right now. I need to add a form on the right side of a photo in Asp.net MVC. I have a render body on my main page and then in the other view I have this bootstrap code:
#using (Html.BeginForm("EditarUtilizador", "Account", null, FormMethod.Post,
new { enctype = "multipart/form-data" }))
{
System.Diagnostics.Debug.WriteLine(#Html.DisplayFor(modelItem => modelItem.ImagePath));
<div class="form-horizontal">
<h4>Editar Perfil Pessoal</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<fieldset class="col-md-3">
#if (Model.ImagePath != null)
{
<img src="~/Images/#Html.DisplayFor(modelItem => modelItem.ImagePath)" width="150" height="150" />
}
else
{
<img src="~/StaticImages/default-user-image.png" width="150" height="150" />
}
<div class="editor-field">
<input id="ImagePath" title="Upload a product image"
type="file" name="file" />
</div>
</fieldset>
<div class="form-group" >
#Html.LabelFor(m => m.Utilizador, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.DisplayFor(m => m.Utilizador, new { #class = "form-control"})
#Html.ValidationMessageFor(model => model.Utilizador, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.EditorFor(m => m.Password, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.NovaPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.EditorFor(m => m.NovaPassword, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Email, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.DisplayFor(m => m.Email, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Telemóvel, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.EditorFor(m => m.Telemóvel, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Telemóvel, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.DataNascimento, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.EditorFor(m => m.DataNascimento, new { #class = "form-control", type = "date", })
#Html.ValidationMessageFor(model => model.DataNascimento, "", new { #class = "text-danger" })
</div>
What I have at the moment is this:
I want to form to appear on the right, but in my case it appears below the image.

Answer 1

Because <div> elements are block-level, they will stack on top of one another by default. Alter the CSS to get what you desire.

Answer 2

Using Bootstrap Grid Mechanism
You can align content in the following manner
#Html.BeginForm(){
<div class="row">
<div class="col-md-8">
Add the input fields in this column
</div>
<div class="col-md-4">
Add the image portion here
</div>
</div>
}
The maximum value of column in Bootrap grid is 12, you can divide this value into individual columns like I did. You can tweak the col-md-* values according to your preference.
You can learn more about the bootstrap Grid in the following link.
https://getbootstrap.com/examples/grid/