I have added a !important to make sure that my css rules comes first but my inputs still behave like it was display in block; fiddle
input{
display: inline!important;
}
<p>My name is
<input type="text" placeholder="Name" class="form-control" style='display:inline;'/>
from USA. And I'm <input type="text" placeholder="21" class="form-control" style='display:inline;'/> years old.
</p>
All you need to do is reset the width to auto - it was 100%. It's worth noting that the Bootstrap styling is coming from the .form-control selector; use that to overwrite it.
.form-control {
width:auto;
display:inline-block;
}
No need for inline styling or !important.
<p>My name is
<input type="text" placeholder="Name" name="name" class="form-control" style='display:inline; width:100px'/>
from USA. And I'm <input type="text" name="age" placeholder="21" class="form-control" style='display:inline; width:100px'/> years old.
</p>
you can resize your input button with CSS including width in input style
I added the form tag for inline forms, it works when you have enough room on the page for one line.
<form class="form-inline" role="form">
<div class="form-group">
<p>My name is
<input type="text" placeholder="Name" name="name" class="form-control" style='display:inline;'/>
from USA. And I'm <input type="text" name="age" placeholder="21" class="form-control" style='display:inline;'/> years old.
</p>
</div>
</form>
Here's some more information explaining it from getbootstrap.com.
"Add .form-inline to your for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
Requires custom widths Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within."
Works in jsfiddle when it's wide enough.
