set my objects to left of the columns in bootstrap 3 - css

Question

I am using bootstrap 3 in my website.
I created a row that looks like the following image, within this row, i've created 4 columns:
Left: picture
L-R: text
L-L: Input
Right: Button
Where is my problem ?
1. Set the user/password/input/login button to the left of the columns
2. set button height small
3. "Forgot your password" to be in 1 line and not 2 lines.
Like the following picture:
I am new to HTML/CSS. How can i achieve it ?
Here is my code:
<div class="row loginBody">
<div class="col-md-4 "></div>
<div class="col-md-4 ">
<div class="container-fluid InputLoginDetails LoginFont">
<div class="row LoginRow">
<div class="col-md-4"><img src="img/Hello.png" class="img-responsive" /></div>
<div class="col-md-2">
User:
Password:
</div>
<div class="col-md-3 ">
<input type="text" class="form-control">
<input type="text" class="form-control">
<p>Forgot your password?</p>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary ">Login</button>
</div>
</div>
</div>
</div>
.loginBody{
background-color: #808689;
margin: auto;
margin-top: 5%;
border-radius: 5px;
}
.LoginRow{
padding-top: 3%;
padding-bottom: 3%;
background-color: white;
}
.LoginFont{
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
color: #7296cd;
font-size: 1em;
font-weight: bold;
padding-top: 5%;
}
.InputLoginDetails input[type="text"] {
height: 1.1em;
font-size: 0.9em;
}

Answer 1

I changed several things in your HTML markup.
1.) You don't use .container classes within a row, they are just used as containers outside of rows.
Note that, due to padding and more, neither container is nestable.
Bootstrap Containers
2.) You don't need 4 columns within your '.LoginRow', one for the image and one for the form elements are sufficient and give you more flexibility.
3.) Use the horizontal forms markup of bootstrap to create the form layout.
4.) All in all, you need to take a closer look at the Bootstrap docs and their examples, especially the grid system. Then it is really easy to do a lot of things.
Here is your changed HTML markup:
<div class="row loginBody">
<div class="col-md-4 "></div>
<div class="col-md-4 ">
<div class="InputLoginDetails LoginFont">
<div class="row LoginRow">
<div class="col-md-4"><img src="http://placehold.it/200x200" class="img-responsive"></div>
<div class="col-md-8">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">User</label>
<div class="col-sm-6">
<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-6">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary">Login</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<p>Forgot your password?</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
You said you wanted to align the User/Password label to the left. Since the bootstrap default labes are aligned to the right, I created this CSS additionally:
.LoginRow .form-group label {
text-align: left;
}
And here is a working bootply

Answer 2

If I understood correctly, and with the code you have provided. I think you didnt have to add both labels with the same div and input boxes. Please check the fiddle to see if thats what you wanted.
I also removed the <p> tag from "Forgot your password".
I changed
<div class="col-md-2">
User:
Password:
</div>
To
<div class="col-md-2">
User:
<input type="text" class="form-control">
</div>
Fiddle