ecain ecain - 3 years ago 126
CSS Question

Aligning buttons and input form in mobile screen size - Bootstrap

I have a text input and 3 buttons:

<div class = "container"
<input type="text" class = "form-control" placeholder="Input here">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>


I know that normally I could use
form-inline
but that does not work for smaller screen sizes. With a mobile screen size, how do I align the buttons and input form so that it is on one line?

Answer Source

It doesn't use bootstrap, but you can add

display: flex

to the container div.

https://jsfiddle.net/cb95vs5p/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download