bootstrap 4
<br>

<input type="checkbox" id="xs" v-model="$store.state.sub.bp.xs" readonly>
<label for="xs">extra small</label>
<br><br>

<input type="checkbox" id="sm" v-model="$store.state.sub.bp.sm" readonly>
<label for="sm">small</label>
<input type="checkbox" id="smAndUp" v-model="$store.state.sub.bp.smAndUp" readonly>
<label for="smAndUp">small and up</label>
<input type="checkbox" id="smAndDown" v-model="$store.state.sub.bp.smAndDown" readonly>
<label for="smAndDown">small and down</label>
<br><br>

<input type="checkbox" id="md" v-model="$store.state.sub.bp.md" readonly>
<label for="md">medium</label>
<input type="checkbox" id="mdAndUp" v-model="$store.state.sub.bp.mdAndUp" readonly>
<label for="mdAndUp">medium and up</label>
<input type="checkbox" id="mdAndDown" v-model="$store.state.sub.bp.mdAndDown" readonly>
<label for="mdAndDown">medium and down</label>
<br><br>

<input type="checkbox" id="lg" v-model="$store.state.sub.bp.lg" readonly>
<label for="lg">large</label>
<input type="checkbox" id="lgAndUp" v-model="$store.state.sub.bp.lgAndUp" readonly>
<label for="lgAndUp">large and up</label>
<input type="checkbox" id="lgAndDown" v-model="$store.state.sub.bp.lgAndDown" readonly>
<label for="lgAndDown">large and down</label>
<br><br>

<input type="checkbox" id="lg" v-model="$store.state.sub.bp.lg" readonly>
<label for="lg">extra large</label>
<br><br>