Bootstrap Form Groups not inline - html

Question

My problem is that the "Category" button and the input bar with the "GO!" button are not on the same line as each other.
Here is a code snippet:
<form class="form" role="form">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Category <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-info" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</form>
And this is what it currently looks like:
As you can see they are both on separate lines.

Answer 1

I thing You Should write
<form class="form-inline" role="form">
....
</form>
If You are write the form class (.form) in your css file. Then Ok. Because I think There is not any classes in Bootstrap.css which Name is Form(.form). It's
1st.
<form></form>
2nd.
<form class = "form-inline"></form>
3rd.
<form class = "form-horizontal"></form>