collapse inline form bootstrap - forms

Question

i've added a inline-form to my page, in the main area,
the form is a bit to wide, i would like that it collapse at 991px,
but the rest of the page can collapse at 767px
i understand it can be done with mediaquery but not sure on what to code.
i'm stuck here!
what can i do?
i copied the inline form originally from a navbar of a file, the button is working fine.
it look like this:
<div class="container">
<div class="text-center">
<button
class="btn btn-default form-toggle"
type="button"
data-toggle="collapse"
data-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"> <span class="sr-only"> Toggle navigation</span> Reservations
</button>
</div>
<div id="collapseExample" class="navbar-collapse collapse">
<div class="text-center ">
<form class="form-inline navbar-form" name="bookerform" action="---" method="GET" target="_self">
<div class="form-group">hidden elements</div>
<div class="form-group">arrivo</div>
<div class="form-group">partenza</div>
<div class="form-group text-left"> Numero N</div>
<div class="form-group text-left"> Numero A</div>
<div class="form-group text-left"> Numero B</div>
<div class="form-group"> button check</div>
</form>
</div>
</div>
</div>

Answer 1

thank you for your help,
ok actually i'm almost there.
i like the solution using the bootstrap grid, i've added the media queries but it's not showing as i want, from 992 above it should show only the form, not the button
<div class="container">
<div class="text-center">
<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#myForm"> Reservations
</button>
</div>
<br>
<form class="collapse collapse-class" role="form" id="myForm">
<div class="col-lg-2">
<p>
<input type="email" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="password" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="text" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="text" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="text" class="form-control">
</p>
</div>
<div class="col-lg-2">
<button type="submit" class="btn btn-default">Button</button>
</div>
</form>
</div>
#media (max-width: 992px) {
.collapse-class {
display: none;
}
}

Answer 2

You can do your on custom collapsing with a simple media query and css class. Simply toggle the CSS display from inline-block to block. Here, at 1000px and under, the two selects of the the second td will stack vertically; horizontally above 1000px.
CSS:
.collapse-it {
display: inline-block;
}
#media (max-width: 1000px) {
.collapse-it {
display:block;
}
.mobile-view:after {
content:"mobile view vertical stacking";
}
}
HTML:
<table style="border: 1px solid black;">
<tbody><tr>
<td style="border: 1px solid black;">
<div style="margin:5px;">credit card expiration</div>
</td>
<td style="border: 1px solid black;">
<div style="margin:5px;">
<div class="form-group collapse-it">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
<div class="form-group collapse-it">
<select>
<option>d</option>
<option>e</option>
<option>f</option>
</select>
</div>
</div>
</td>
<td class="mobile-view" style="border: 1px solid black;"></td>
</tr>
</tbody></table>
View Demo on Bootply

Answer 3

If you just want it to go away at 992px but keep the button, put a class on what you want to collapse, and leave the button outside it. Then write a media query to display: none at 992px like so:
<form class="form-inline navbar-form collapse-class" name="bookerform" action="---" method="GET" target="_self">
<div class="form-group">hidden elements</div>
<div class="form-group">arrivo</div>
<div class="form-group">partenza</div>
<div class="form-group text-left"> Numero N</div>
<div class="form-group text-left"> Numero A</div>
<div class="form-group text-left"> Numero B</div>
<div class="form-group"> button check</div>
</form>
#media (max-width: 992px) {
.collapse-class {
display: none;
}
}
There may be a more elegant way to do this, but I'm having a hard time figuring out exactly what you want, so I'm trying to be general.