Dylan Klomparens Dylan Klomparens - 1 month ago 10
CSS Question

HTML textbox and text on the same line using Bootstrap or CSS

How can I put an HTML textbox on the same line as some text? Here's the example I'm working with: http://www.bootply.com/FhlyLoLMNv

I need this to work for both desktop and mobile rendering. I've been able to get this to work on desktop but adding

class="form-inline"
to the outer
<div>
, but it does not work for mobile rendering: http://www.bootply.com/G5ZzJ8imG8 (you have to click the mobile preview button to see the rendering flaw).

Is there a way to get this to work on mobile also?

Answer

Removing the form-inline class from the div and setting the input style to display: inline and width: auto worked for me:

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit <input style="display: inline; width: auto;" type="number" id="downtime" class="form-control" min="1" max="120" inputmode="numeric" pattern="[0-9]*" placeholder="0"> aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    <a id="delayed_logoff_help" class="pointer" tabindex="0" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="Donec consectetur suscipit orci, fringilla rhoncus erat tristique vel. Phasellus sagittis dapibus fermentum. Donec posuere erat et mi tincidunt, vitae ultricies turpis pellentesque. Morbi volutpat neque lorem, eget luctus leo elementum sed. Cras cursus velit mi. Quisque et vulputate est, gravida elementum urna.">What's this?</a>
</div>