Search code examples
cssbackground-colorbootstrap-vue

How to create a component which have 50% of the background color in Vue

I am working on bootstrap-vue. I need to build a component which has 50% of the background-color and rest blank (vertically). The component should occupy 100% of the screen after the navigation bar, and it should have 50% This component will have different sub-components.

Something like this, But a straight line separating them. (just like Red Line)

enter image description here

I have tried adding height and background-color manually. It some how, worked. But, I am looking to do it in bootstrap-vue.

Here is the basic code: CardGrouper.vue:

<template lang="html">

  <div class="h-100" >
    <h1>card-grouper Component</h1>
    <div class="h-50" style=" background-color: #C8544F">
      Height 50%
    </div>
  </div>

</template>

<script lang="js">
  export default  {
    name: 'CardGrouper',
    props: [],
    mounted() {

    },
    data() {
      return {

      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped >

</style>

I also tried different classes of bootstrap to add 50% background. But It did'nt work.

How is it possible to do it using Bootstrap-vue and vue. Specifically, I am looking for a pure bootstrap solution. since I am developing a responsive application.

Thanks for the help

Solution

  • You could do this using linear gradients:

    .full{
width: 100vw;
height: 100vh;
background: linear-gradient(to bottom, blue 50%, yellow 50%);
}
    <div class="full"></div>