Email and Password form in one row with bootstrap - html

Question

I started bootstrap very recently. I want to create email/ password validation in one row on my rails app:
email? | password? | OK
Right now, I have a code working for just an email and OK button in one row:
email? | OK
<div class="col-lg-12 text-center v-center">
...
<form class="col-lg-12">
<div class="input-group input-group-lg col-sm-offset-4 col-sm-4">
<input type="text" class="center-block form-control input-lg" title="Enter your email." placeholder="email?">
<span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span>
</div>
</form>
</div>
and
.v-center {
margin-top:7%;
}
I tried adding a password on the code above:
...
<div class="input-group input-group-lg col-sm-offset-4 col-sm-4">
<input type="text" class="center-block form-control input-lg" title="Enter your email." placeholder="email">
<input type="text" class="center-block form-control input-lg" title="Enter your password." placeholder="password">
<span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span>
...
But it ended up looking like this:
email?
| OK
password?
What is missing?

Answer 1

It looks like bootstrap's .center-block has display: block; in it. If you want elements to appear side-by-side, they generally need a display of inline or inline-block in the css (there are a few other ways, but both those are arguably the most common/simplest).

Answer 2

Here is code for this: The trick is to use "form-inline" class in the form tag
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>