Bootstrap button block change alignment when stacked vertically - css

Question

https://jsfiddle.net/wc3f1h0m/
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="btn-block">
<input style="max-width:170px;" type="submit" class="appBtn btn btn-primary" value="App Button One"
/>
<input style="max-width:170px;" type="submit" class="appBtn btn btn-primary"
value="App Button Two"
/>
</div>
</div>
</div>
I have two button underneath a form in a btn-block. While the form is wide enough, I would like the buttons side by side (stacked horizontally), and roughly centered under the form.
When the screen width shrinks, eventually the buttons will stack vertically (due to btn-block), but at this point I would like to align them left, rather than their initial center position.
Currently I am just offsetting them using another column, so I would like that left column to dissapear when they stack vertically, or some other way of achieving this. I was thinking of having another with a certain width but zero height, but when I tried that the div always stays to the left of the first button, it does not get stacked vertically alongside the others.
How can I center the buttons when they are stacked horizonally, but left align them when they switch vertically?
More generally, how can I apply rules based on this "switch" - do the elements get a different class when they switch to stacking vertically I can apply more rules on?
TIA

Answer 1

I don't know that you can make them automatically align left once they no longer fit side by side but you can if you define a particular media query break point for them to do that at. So because you've got a max-width on the buttons of 170px each, i've applied the media query to keep them left aligned up until 320px. Seems to hit the mark pretty well.
https://jsfiddle.net/wc3f1h0m/15/
key changes are:
1) get rid of the col-xs-1 div as the buttons are centered now anyway so its not doing anything.
2) adding a new class "btn-alignment" to the "btn-block" so that we can apply our own custom css to it.
.btn-block.btn-alignment {
text-align:left;
}
#media(min-width:320px) {
.btn-block.btn-alignment {
text-align:center;
}
}
Also changed your h5's to labels which is what you should use to define inputs on forms.

Answer 2

<div class="row">
<div class="col-xs-6 col-sm-6 col-md-12">
<input class="btn btn-primary btn-block" value="Button One">
</div>
<div class="col-xs-6 col-sm-6 col-md-12">
<input class="btn btn-primary btn-block" value="Button Two">
</div>
</div>
Or this inverse:
<div class="row">
<div class="col-md-6">
<input class="btn btn-primary btn-block" value="Button One">
</div>
<div class="col-md-6">
<input class="btn btn-primary btn-block" value="Button Two">
</div>
</div>
Is this the sort of thing you are looking for? Was kind of confused how the whole form was wrapped in a col-md-4 as to get the behaviour you were looking for. Hopefully one of these

Answer 3

'<style type="text/css">
/*Use the following code*/
#media(max-width:320px) {
.btn-block .appBtn{
display:block;
margin:10px auto;
}
}
/*-----or---------*/
#media(max-width:480px) {
.btn-block .appBtn{
display:block;
margin:10px auto;
}
}
</style>'