TechGuy TechGuy - 1 year ago 43
CSS Question

How to display HTML form input elements (Bootstrap's class "form-group" ) inline?

I'm using bootstrap's form-group and form-control classes to create a simple HTML from. Please refer the screenshots. I tried setting the display property of form-control class to inline, but the html elements are not getting displayed inline. PFB my code snippet.

<div id="user_search" class="form-group" style="display:inline;">
<label for="search_id" class="label_font">Search Title</label>
<input type="text" class="form-control" id="search_id" placeholder="Movie Title, TV Show title..." size="40">
<label for="genre_id" >Genre</label>
<select id="genre_id">
<label for="type_id" >Title Type</label>
<select id="type_id">
<option>TV Show</option>
<label for="year_id" >Year</label>
<input type="number" width="10" min="1900" max="2025" step="1" value="2016" id="year_id">
<button type="button" id="search_Title">Search Title</button>


CSS file


I also tried display:inline!important. But couldn't see any difference. I want all the form to be displayed in a single line using bootstrap's form-group and form-control classesenter image description here.

Answer Source

You should simply use the form-inline class ... as per Bootstrap documentation. Basically wrap the div with another which has the 'form-inline' class and you should be good. No need for your display:inline; additional css.