Fill the page entirely with background color - css

Question

How can I extend the color green up to bottom? And how can I move the CRUD in left too
So as you can see it can't fill the page entirely.
Here's my code 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 is my mistake with this? I tried using flex a while ago but didn't understand why it always fits the content to itself.
By the way sorry for my bad English.
THanks

Answer 1

just write in your body tag it will solve your problem
bgcolor="green"

Answer 2

Use CSS to get the background color changed, and ensure the body (document) is at least 100% of the viewport height :
body {
background-color: green;
min-height: 100vh;
}
To align "CRUD" to the left, use the Bootstrap utility class "text-left":
<h1 class="text-left">CRUD</h1>
https://getbootstrap.com/docs/4.3/utilities/text/
https://bootstrap-vue.js.org/docs/reference/utility-classes