How to output inline text with bootstrap

Question

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>

Answer 1

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.

Updated Example

.form-control {
    width:auto;
    display:inline-block;
}

No need for inline styling or !important.

Answer 2

<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

Answer 3

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."

http://getbootstrap.com/css/

Works in jsfiddle when it's wide enough.