<form class="hgm-form horizontal">
<div class="row mb-1">
<label class="col-sm-2 col-xs-12" for="exampleInput">Example Input</label>
<div class="col-sm-10 col-xs-12">
<input id="exampleInput" type="text" placeholder="Example Input" />
</div>
</div>
<fieldset class="row mb-1">
<div class="col-sm-2 col-xs-12">
Radio group
</div>
<div class="col-sm-10 col-xs-12">
<div class="hgm-form__check">
<input id="exampleRadio" type="radio" name="example_radio" />
<label for="exampleRadio">Example radio</label>
</div>
<div class="hgm-form__check">
<input id="exampleRadio2" type="radio" name="example_radio" />
<label for="exampleRadio2">Example radio 2</label>
</div>
</div>
</fieldset>
<div class="row mb-1">
<div class="col-sm-10 col-sm-offset-2 col-xs-12">
<div class="hgm-form__check">
<input id="exampleCheckbox" type="checkbox" />
<label for="exampleCheckbox">Example checkbox</label>
</div>
</div>
</div>
<div class="row mb-1">
<div class="col-sm-10 col-sm-offset-2 col-xs-12">
<div class="hgm-form__switch">
<input id="exampleSwitch" name="switch_one" type="checkbox" />
<label for="exampleSwitch">
<span class="switch-rail">
<span class="switch-slider"></span>
</span>
Example switch
</label>
</div>
</div>
</div>
</form>
<form class="hgm-form horizontal">
<div class="row mb-1">
<label class="col-sm-2 col-xs-12" for="exampleInput">Example Input</label>
<div class="col-sm-10 col-xs-12">
<input id="exampleInput" type="text" placeholder="Example Input" />
</div>
</div>
<fieldset class="row mb-1">
<div class="col-sm-2 col-xs-12">
Radio group
</div>
<div class="col-sm-10 col-xs-12">
<div class="hgm-form__check">
<input id="exampleRadio" type="radio" name="example_radio"/>
<label for="exampleRadio">Example radio</label>
</div>
<div class="hgm-form__check">
<input id="exampleRadio2" type="radio" name="example_radio"/>
<label for="exampleRadio2">Example radio 2</label>
</div>
</div>
</fieldset>
<div class="row mb-1">
<div class="col-sm-10 col-sm-offset-2 col-xs-12">
<div class="hgm-form__check">
<input id="exampleCheckbox" type="checkbox"/>
<label for="exampleCheckbox">Example checkbox</label>
</div>
</div>
</div>
<div class="row mb-1">
<div class="col-sm-10 col-sm-offset-2 col-xs-12">
<div class="hgm-form__switch">
<input id="exampleSwitch" name="switch_one" type="checkbox"/>
<label for="exampleSwitch">
<span class="switch-rail">
<span class="switch-slider"></span>
</span>
Example switch
</label>
</div>
</div>
</div>
</form>
/* No context defined. */
Use the flexbox grid system to control at which breakpoints the horizontal stacking order of the form collapses into a single vertical column.
As a general rule thumb, use col-xs-12 (mobile breakpoint) to force 100% width of columns.