I’m using laravel 6 bootstrap 4.4.1 and bootstrap-vue 2.6.1
My goal is the force the list-group to horizontal on small screen sizes and remove the text located in my span tags. So far the removal of the span text sorta works, but it’s removed on all screen sizes. Also the damn list-group refuses to change to horizontal. I hate ui/ux design.
jsfiddle example works:
https://jsfiddle.net/guruling/oyumzb9c/16/
My Code:
<div>
<b-container>
<b-row>
<b-col class="col-md-6 col-xl-3">
<b-list-group>
<b-list-group-item class="d-lg-vertical">
<b-link v-on:click="component = 'product-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
</svg>
<span class="d-none">Material List</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="d-lg-vertical">
<b-link v-on:click="component = 'batch-create-material-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
</svg>
<span class="d-none">Batch Create Material List</span>
</b-link>
</b-list-group-item>
</b-list-group>
</b-col>
<b-col class="col-md-6 col-xl-9">
<keep-alive>
<component v-bind:is="component"></component>
</keep-alive>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';
export default {
name: 'Dashboard',
components: {
'product-list': ProductList,
'batch-create-material-list': CreateProductAndCategory,
},
data() {
return {
component: 'product-list'
}
},
}
</script>
<style scoped>
/* small screen below 992px width */
@media only screen and (max-width : 991px) {
.d-none{display:none;}
}
/* large screen above 991px width */
@media only screen and (min-width : 992px) {
.d-lg-vertical{
display:block;
}
}
</style>