Bootstrap Form-Group Inside Form-Inline - css

Question

I m a newbie in Bootstrap and I have encounter a problem as I wan to display a select box in block style and another form group beside.
Here is my code
<div class="form-inline>
<div class="form-group">
<label for="EventType">Event Type</label>
<select class="form-control">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
</div>
</div>
Current Output is
My desire output is display both form group class div in inline method. But currently output show everything in inline while not div only. Is there any method to do so?

Answer 1

If possible write the HTML as follow-
<form class="form" role="form">
<div class="form-inline>
<div class="form-group">
<label for="EventType">Event Type</label>
<select class="form-control">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
</div>
</form>
Again you can do this with the HTML you have provided. In this case, you have to write some custom CSS as follow-
.form-group{
display:block;
clear:both;
width:100%;
}