Currently, I am working on a VueJs and Bootstrap4 component where my aim is to achieve a design similar to the one shown using the available bootstrap classes.
After going through the documentation, I came across the customized classes h-75 and h-25 provided by Bootstrap. Despite using these classes, I am unable to achieve the desired outcome.
Vue.component('listcontent', {
template: '<div class="w-100 h-75 bg-info">ds</div>'
})
Vue.component('datashared', {
template: ' <div class="w-100 h-25 bg-primary">dsadsa</div>'
})
Vue.component('maincomponent', {
template: `<div class="container h-100" >
<div class="row h-100">
<div class="col-md-5 h-100 border">
<listcontent></listcontent>
<datashared/></datashared>
</div>
</div>
</div>`
})
new Vue({ el: '#app'});html,body {
height: 100% !important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b2d2e3e1b69756e756a6a">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<maincomponent></maincomponent>
</div>I'm looking for some guidance on what might be going wrong and how I can achieve the desired result in my project.