Is there a way to extend the green color from top to bottom on the page? Also, how can I move the CRUD section to the left?
https://i.sstatic.net/pXxhl.png
I'm having trouble filling the entire page with the content.
Below is my code written in VueJS:
<template>
<div class="container-fluid">
<h1>CRUD</h1>
<div class="my-form col-xs-1">
<b-card class="box">
<b-form-group id="input-group-1">
<b-form-input
id="input-1"
required
placeholder="Username"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-2">
<b-form-input
id="input-2"
type="password"
required
placeholder="Password"
></b-form-input>
</b-form-group>
<div class="btn">
<b-button variant="primary" >Login</b-button>
<b-button variant="success" @click="$router.push('/register')">Register</b-button>
</div>
</b-card>
</div>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
.container-fluid {
background-color: green;
height: 100%;
}
.my-form {
display: block;
margin-top: 120px;
margin-bottom: 120px;
}
.box {
padding: 10px;
margin-bottom: 20px;
}
.btn {
margin: 5px;
}
</style>
What am I doing wrong here? I attempted using flex but the content always just fits itself. Any advice would be much appreciated!
Pardon my imperfect English.
Thank you